js拓扑图

// 示例代码：使用D3.js进行拓扑图渲染优化
const svg = d3.select("svg");
const zoom = d3.zoom().on("zoom", (event) => {
  svg.attr("transform", event.transform);
});

svg.call(zoom);

const simulation = d3.forceSimulation(nodes)
  .force("link", d3.forceLink(links).id(d => d.id))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width / 2, height / 2));

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);
});

// 示例代码：自定义节点样式
node.append("circle")
  .attr("r", 10)
  .style("fill", d => d.color || "blue")
  .style("stroke", "black");

// 示例代码：自定义边样式
link.append("line")
  .style("stroke", "black")
  .style("stroke-width", 2);

// 示例代码：添加节点点击事件
node.on("click", (event, d) => {
  console.log("Node clicked:", d);
  // 自定义点击后的操作
});