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。为了更好地显示链接停在节点的边界，我增加链接＆＃39;宽度和节点＆＃39;不透明度。

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

1 个答案: