D3.js强制链接到矩形节点边框

wmtdaxz3  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(174)

我一直在尝试使用D3.js,我无法使图中的链接指向节点边界而不是节点中心。
我一直在用下面的jsfiddle来测试它,但是我还是做不到...
http://jsfiddle.net/srikanthp0548/Lnc9a57r/6/
以下是我的分笔成交点代码:

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

我假设我必须更新tick()函数中的某些内容以返回不同的值:
我使用的是矩形节点而不是圆。链接从矩形的中心开始。
我从这个Create links from node border to node border, not center to center中找到了答案
我怎样才能画出从一个节点到另一个节点的链接(而不是从中心到中心)?任何帮助都将非常感激

omqzjyyz

omqzjyyz1#

tick()函数中,您正在SVG折线元素上设置x1,y1,x2,y2属性,但该元素不支持这些属性。在创建链接时,请改用SVG line元素,它们将正确显示。

相关问题