d3.js在鼠标悬停时选择连接的节点

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

// 加载数据
d3.json("data.json").then(function(data) {
  // 创建节点和连接
  var nodes = data.nodes;
  var links = data.links;

  // 创建力导向图
  var simulation = d3.forceSimulation(nodes)
    .force("link", d3.forceLink(links).id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(250, 250));

  // 绘制连接
  var link = svg.selectAll(".link")
    .data(links)
    .enter()
    .append("line")
    .attr("class", "link");

  // 绘制节点
  var node = svg.selectAll(".node")
    .data(nodes)
    .enter()
    .append("circle")
    .attr("class", "node")
    .attr("r", 10)
    .on("mouseover", function(d) {
      // 鼠标悬停时选择连接的节点
      link.style("stroke", function(l) {
        if (l.source === d || l.target === d) {
          return "red";
        } else {
          return "gray";
        }
      });
    })
    .on("mouseout", function() {
      // 鼠标移出时恢复连接的颜色
      link.style("stroke", "gray");
    });

  // 启动力导向图模拟
  simulation.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

    node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
  });
});