D3 SVG定位箭头在路径上

Question

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

P.S。我知道我可以改变我的绘图顺序在我的节点顶部画箭头但这不是我想要的。

...

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

Answer 1

我根据Mark对这个问题Align Marker on node edges D3 Force Layout的回答解决了这个问题。这是我在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;
});