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

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

我的笨蛋：http://plnkr.co/edit/haPmq3LXpyJgCu1u9aCU?p=preview

Answer 1

使用...

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：http://plnkr.co/edit/rXCaKjRTTBzrItFmbVYt?p=preview。为了更好地显示链接停止在节点的边界处，我正在增加链接的宽度和节点的不透明度。