gpt4 book ai didi

javascript - D3 SVG 路径上的定位箭头

转载 作者:行者123 更新时间:2023-11-29 19:06:18 25 4
gpt4 key购买 nike

<分区>

我正在用 D3 可视化一个力布局网络,但我在沿着我的节点之间的边缘定位箭头时遇到了问题。正如您在图片中看到的,我正在根据每个节点的属性值缩放节点的大小。基本上我需要某种方法来动态计算/更改箭头在边缘上的位置(根据用于缩放节点的相同值)以使它们可见并防止它们与节点重叠。实际上,我希望我的箭头“接触”节点的外边缘。有没有人有办法做到这一点?这些代码片段展示了我如何创建箭头。也许我应该使用其他方式?

附注我知道我可以更改绘图顺序以在我的节点顶部绘制箭头,但这不是我想要的。

enter image description here

...

svg.append("defs").append("marker")
.attr("id", "arrowhead")
.attr("refX", 5) /*must be smarter way to calculate shift*/
.attr("refY", 2)
.attr("markerWidth", 6)
.attr("markerHeight", 4)
.attr("orient", "auto")
.append("path")
.attr("d", "M 0,0 V 4 L6,2 Z");

...

path.enter()
.append("svg:path")
.attr("class", function (d) {
return "link " + d.type;
})
.attr("id", function (d) {
return "path_" + d.id;
})
.attr("marker-end", "url(#arrowhead)")
.transition().duration(8000)
.style("stroke-width", stylePathStrokeWidth)
...

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com