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

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

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

---

我的砰砰声：

用

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);
    });

这里，幻数

24

是这些节点的半径

这只是给你一个基本的想法，你可以用几种方法来改进代码。例如，为了避免在每个记号处计算（相同）角度4次，可以使用局部变量或基准

---

以下是更新的plunker:。为了更好地显示链接停止在节点的边界，我增加了链接的宽度和节点的不透明度。

PS：当我第一次读到这个问题时，我认为这肯定是一个重复。。。然而，显然不是这样（有一个类似的Q/A，但是针对

元素，而不是

元素）。@顺便说一句，你没有做错任何事情：大多数在线示例都是从一个中心到另一个中心。。。发生的事情是，他们把圆圈画在线条的顶部，所以，你无法区分两者之间的区别。这就是我想知道的，为什么在我的例子中没有发生。。然而，你的第二条线索也很有用。

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);
    });