javascript - 创建从节点边界到节点边界的链接，而不是中心到中心

Question

虽然我在互联网上看到的大多数示例都具有从一个节点边界到另一个节点边界的链接，但在我的情况下(我不确定我做了什么不同)它是从一个中心到另一个中心。这对我来说不太好。

如何绘制从一个节点边界到另一个节点边界(而不是从中心到中心)的链接？

link.enter()
  .insert('line')
  .attr('class', 'link')
  .attr('marker-mid', 'url(#mid)')
  .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;
  })
  .style('stroke', colors.links)
  .style('opacity', function(d) {
    return d.target.module ? 0.2 : 0.3
  })

我的 plunker:http://plnkr.co/edit/haPmq3LXpyJgCu1u9aCU?p=preview

Answer 1

用...计算两个节点之间的 Angular

Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x)

... 然后使用 Math.sin() 和 Math.cos() 改变位置:

link.attr('x1', function(d) {
        return d.source.x + (Math.cos(Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x)) * 24);
    })
    .attr('y1', function(d) {
        return d.source.y + (Math.sin(Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x)) * 24);
    })
    .attr('x2', function(d) {
        return d.target.x - (Math.cos(Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x)) * 24);
    })
    .attr('y2', function(d) {
        return d.target.y - (Math.sin(Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x)) * 24);
    });

这里，魔数(Magic Number) 24 是这些节点的半径。

这只是为您提供基本思路，您可以通过多种方式改进该代码。例如，为了避免在每个刻度处计算(相同) Angular 4 次，您可以使用局部变量或数据。

这是更新的插件:http://plnkr.co/edit/rXCaKjRTTBzrItFmbVYt?p=preview .为了更好地显示链接停在节点的边界，我增加了链接的宽度和节点的不透明度。