Javascript D3 SVG在路径上定位箭头

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

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

---

我根据马克对这个问题的回答解决了这个问题。这是我在tick函数中的代码：

function tick() {

// fit path like you've been doing
path.attr("d", function (d, i) {
    dr = 550 / d.linknum;
    var result = "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
    return result;
});

// recalculate and back off the distance
path.attr("d", function (d, i) {  
    var pl = this.getTotalLength();
    //this is the magic
    var r = d.target.size + 3 * d.size; // Multiply the marker size (3) with the size of the edge (d.size) because the markers are scaling with the edge which they are attached to!!
    var m = this.getPointAtLength(pl - r);
    dr = 550 / d.linknum;
    var result = "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + m.x + "," + m.y;
    return result;
});

---

您必须在defs中为每条路径动态构建一个箭头标记，调整每个圆半径的refX。请参阅此@Mark谢谢您的帮助！

function tick() {

// fit path like you've been doing
path.attr("d", function (d, i) {
    dr = 550 / d.linknum;
    var result = "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
    return result;
});

// recalculate and back off the distance
path.attr("d", function (d, i) {  
    var pl = this.getTotalLength();
    //this is the magic
    var r = d.target.size + 3 * d.size; // Multiply the marker size (3) with the size of the edge (d.size) because the markers are scaling with the edge which they are attached to!!
    var m = this.getPointAtLength(pl - r);
    dr = 550 / d.linknum;
    var result = "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + m.x + "," + m.y;
    return result;
});