D3力导向图箭头位置与链接视觉问题技术求助

问题1：箭头下方红色链接末端可见 #

当前链接直接绘制在节点中心之间，导致链接延伸进目标节点内部，箭头虽定位在节点边缘，但链接的红色部分会从箭头下方露出。无需调整stroke-width或箭头尺寸，只需让链接终止于目标节点边缘而非中心，同时从源节点边缘起始，就能彻底隐藏多余的红色链接段。

修改方案 #

1. 先在节点创建时，把节点元素的引用绑定到对应的数据对象上，方便后续获取实时半径：

var nodes = svg.selectAll("g.outer")
  .data(data.nodes, function (d) { return d.id; })
  .enter()
  .append("g")
  .attr("class", "outer")
  .attr("id", function (d) { return d.id; })
  .call(d3.drag()
    .on("start", dragStarted)
    .on("drag", dragged)
    .on("end", dragEnded)
  )
  // 绑定节点DOM元素到数据对象
  .each(function(d) { d.node = this; });

2. 修改tick函数，通过向量运算计算链接的起止点（节点边缘位置）：

function tick() {
  links.each(function(d) {
    // 获取源/目标节点当前的半径值
    const sourceRadius = parseFloat(d3.select(d.source.node).select("circle").attr("r"));
    const targetRadius = parseFloat(d3.select(d.target.node).select("circle").attr("r"));
    
    // 计算两点间的向量与距离
    const dx = d.target.x - d.source.x;
    const dy = d.target.y - d.source.y;
    const distance = Math.sqrt(dx * dx + dy * dy);
    
    if (distance === 0) return; // 避免除以0的情况
    
    // 计算单位向量
    const ux = dx / distance;
    const uy = dy / distance;
    
    // 调整链接起点（源节点边缘）和终点（目标节点边缘）
    const x1 = d.source.x + ux * sourceRadius;
    const y1 = d.source.y + uy * sourceRadius;
    const x2 = d.target.x - ux * targetRadius;
    const y2 = d.target.y - uy * targetRadius;
    
    d3.select(this)
      .attr("x1", x1)
      .attr("y1", y1)
      .attr("x2", x2)
      .attr("y2", y2);
  });

  nodes.attr("transform", d => `translate(${d.x}, ${d.y})`);
}

问题2：鼠标hover节点放大后箭头偏移 #

节点半径动态变化时，固定半径的计算逻辑会失效。上面的修改已经解决了这个问题——在tick函数中实时获取节点当前的半径值（包括过渡动画中的动态值），再重新计算链接位置，确保箭头始终贴合节点边缘。

为了让过渡动画过程中链接也能实时更新，需要在节点的mouseenter和mouseleave事件中添加帧更新：

nodes.append("circle")
  .style("fill", "lightgrey")
  .style("stroke", "blue")
  .attr("r", 40)
  .on("mouseenter", function() {
    d3.select(this)
      .transition()
      .duration(250)
      .attr("r", 40 * 1.3)
      .attr("fill", "blue")
      // 过渡过程中每帧触发一次simulation tick，更新链接位置
      .tween("updateLinks", function() {
        return function() {
          simulation.tick();
        };
      });
  })
  .on("mouseleave", function() {
    d3.select(this)
      .transition()
      .duration(250)
      .attr("r", 40)
      .attr("fill", "lightgrey")
      .tween("updateLinks", function() {
        return function() {
          simulation.tick();
        };
      });
  });

内容的提问来源于stack exchange，提问作者ICoded