小编Bav*_*cht的帖子

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

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

...

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