D3.js网络只移动一次(使用教程代码)

// 定义节点和边的数据
var nodes = [
  { id: 1, name: "Node 1" },
  { id: 2, name: "Node 2" },
  { id: 3, name: "Node 3" }
];

var links = [
  { source: 1, target: 2 },
  { source: 2, target: 3 },
  { source: 3, target: 1 }
];

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

// 创建节点
var node = svg.selectAll(".node")
  .data(nodes)
  .enter()
  .append("circle")
  .attr("class", "node")
  .attr("r", 20)
  .attr("cx", function(d) { return d.id * 100; })
  .attr("cy", 250)
  .style("fill", "blue");

// 创建边
var link = svg.selectAll(".link")
  .data(links)
  .enter()
  .append("line")
  .attr("class", "link")
  .attr("x1", function(d) { return (d.source - 1) * 100 + 20; })
  .attr("y1", 250)
  .attr("x2", function(d) { return (d.target - 1) * 100 - 20; })
  .attr("y2", 250)
  .style("stroke", "black");

// 添加交互
node.on("mouseover", function(d) {
  console.log("Node " + d.id + ": " + d.name);
});