如何让D3.js中节点链接从边框到边框而非中心到中心？

这个问题我之前碰到过好多次，核心原因就是你现在直接用了节点的中心坐标（d.source.x/d.source.y这些）来设置连线的起止点，所以连线自然是从中心连到中心啦。要改成边框到边框，只需要根据节点的尺寸和连线的方向，把连线的起点和终点往节点边框的位置偏移就行，具体操作如下：

核心思路 #

1. 先确定节点的「半径/半宽高」：如果是圆形节点，就是它的半径r；如果是矩形节点，就是宽度的一半和高度的一半。
2. 计算两个节点中心连线的角度：用Math.atan2算出从源节点到目标节点的方向角。
3. 偏移坐标：把源节点的中心坐标沿着连线方向偏移一个半径的距离（到达源节点边框），把目标节点的中心坐标沿着连线的反方向偏移一个半径的距离（到达目标节点边框）。

修改后的代码示例 #

假设你的节点是圆形（数据里有r属性），把你原来的连线坐标设置部分改成下面这样：

link.enter()
  .insert('line')
  .attr('class', 'link')
  .attr('marker-mid', 'url(#mid)')
  .attr('x1', function(d) {
    // 计算源到目标的方向向量角度
    const dx = d.target.x - d.source.x;
    const dy = d.target.y - d.source.y;
    const angle = Math.atan2(dy, dx);
    // 从源中心往目标方向偏移半径，得到边框位置
    return d.source.x + d.source.r * Math.cos(angle);
  })
  .attr('y1', function(d) {
    const dx = d.target.x - d.source.x;
    const dy = d.target.y - d.source.y;
    const angle = Math.atan2(dy, dx);
    return d.source.y + d.source.r * Math.sin(angle);
  })
  .attr('x2', function(d) {
    const dx = d.target.x - d.source.x;
    const dy = d.target.y - d.source.y;
    const angle = Math.atan2(dy, dx);
    // 从目标中心往源方向偏移半径，得到边框位置
    return d.target.x - d.target.r * Math.cos(angle);
  })
  .attr('y2', function(d) {
    const dx = d.target.x - d.source.x;
    const dy = d.target.y - d.source.y;
    const angle = Math.atan2(dy, dx);
    return d.target.y - d.target.r * Math.sin(angle);
  })

注意事项 #

• 如果你的节点是矩形，上面的方法需要调整：因为矩形的边框交点计算要考虑连线方向是更靠近水平还是垂直，你可以根据dx和dy的绝对值大小来判断，比如当Math.abs(dx) > Math.abs(dy)时，用矩形的左右边框，否则用上下边框，然后计算对应的交点坐标。
• 别忘了在节点更新的时候（比如拖拽节点、力布局tick事件里）也要用同样的逻辑更新连线坐标，不然拖拽后连线又会回到中心连中心的状态。
• 确保你的节点数据里确实存储了尺寸信息：如果是手动创建的节点，记得给每个节点对象加上r（或者width/height）属性，比如nodes.forEach(node => node.r = 25);。

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