js实现网络拓扑图

使用D3.js实现网络拓扑图

D3.js是一个强大的JavaScript库，适合创建复杂的网络拓扑图。以下是一个基本实现示例：

// 定义数据
const nodes = [
  { id: 1, name: "Node 1" },
  { id: 2, name: "Node 2" },
  { id: 3, name: "Node 3" }
];
const links = [
  { source: 1, target: 2 },
  { source: 2, target: 3 }
];

// 创建SVG容器
const svg = d3.select("body").append("svg")
  .attr("width", 800)
  .attr("height", 600);

// 创建力导向图
const simulation = d3.forceSimulation(nodes)
  .force("link", d3.forceLink(links).id(d => d.id))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(400, 300));

// 绘制连线
const link = svg.append("g")
  .selectAll("line")
  .data(links)
  .enter().append("line")
  .attr("stroke", "#999");

// 绘制节点
const node = svg.append("g")
  .selectAll("circle")
  .data(nodes)
  .enter().append("circle")
  .attr("r", 10)
  .attr("fill", "#69b3a2");

// 更新位置
simulation.on("tick", () => {
  link
    .attr("x1", d => d.source.x)
    .attr("y1", d => d.source.y)
    .attr("x2", d => d.target.x)
    .attr("y2", d => d.target.y);

  node
    .attr("cx", d => d.x)
    .attr("cy", d => d.y);
});

使用Vis.js实现网络拓扑图

Vis.js提供了更简单的网络图实现方式：

// 定义数据
const nodes = new vis.DataSet([
  { id: 1, label: "Node 1" },
  { id: 2, label: "Node 2" },
  { id: 3, label: "Node 3" }
]);
const edges = new vis.DataSet([
  { from: 1, to: 2 },
  { from: 2, to: 3 }
]);

// 创建网络图
const container = document.getElementById("network");
const data = { nodes, edges };
const options = {};
const network = new vis.Network(container, data, options);

使用Cytoscape.js实现网络拓扑图

Cytoscape.js是专为网络图设计的库：

// 初始化cytoscape
const cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    { data: { id: 'n1', name: 'Node 1' } },
    { data: { id: 'n2', name: 'Node 2' } },
    { data: { id: 'n3', name: 'Node 3' } },
    { data: { id: 'e1', source: 'n1', target: 'n2' } },
    { data: { id: 'e2', source: 'n2', target: 'n3' } }
  ],
  style: [
    {
      selector: 'node',
      style: {
        'label': 'data(name)',
        'background-color': '#666'
      }
    },
    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#ccc'
      }
    }
  ],
  layout: {
    name: 'cose'
  }
});

自定义SVG实现简单拓扑图

对于简单的需求，可以直接使用SVG：

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "800");
svg.setAttribute("height", "600");
document.body.appendChild(svg);

// 创建节点
const createNode = (x, y, id) => {
  const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  circle.setAttribute("cx", x);
  circle.setAttribute("cy", y);
  circle.setAttribute("r", "10");
  circle.setAttribute("fill", "blue");
  circle.setAttribute("id", id);
  svg.appendChild(circle);
};

// 创建连线
const createLink = (x1, y1, x2, y2) => {
  const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
  line.setAttribute("x1", x1);
  line.setAttribute("y1", y1);
  line.setAttribute("x2", x2);
  line.setAttribute("y2", y2);
  line.setAttribute("stroke", "black");
  svg.appendChild(line);
};

// 示例使用
createNode(100, 100, "node1");
createNode(200, 200, "node2");
createLink(100, 100, 200, 200);

拓扑图交互功能实现

为拓扑图添加基本交互功能：

// 以D3.js为例添加拖拽功能
node.call(d3.drag()
  .on("start", dragstarted)
  .on("drag", dragged)
  .on("end", dragended));

function dragstarted(event, d) {
  if (!event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(event, d) {
  d.fx = event.x;
  d.fy = event.y;
}

function dragended(event, d) {
  if (!event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

以上方法提供了从简单到复杂的多种实现方案，可以根据项目需求选择合适的库和技术方案。D3.js适合需要高度自定义的场景，Vis.js和Cytoscape.js则提供了更多开箱即用的功能。