我一直在尝试使用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中找到了答案
我怎样才能画出从一个节点到另一个节点的链接(而不是从中心到中心)?任何帮助都将非常感激
1条答案
按热度按时间omqzjyyz1#
在
tick()
函数中,您正在SVG折线元素上设置x1,y1,x2,y2属性,但该元素不支持这些属性。在创建链接时,请改用SVGline
元素,它们将正确显示。