D3 SVG在路径上定位箭头[重复]答案

【问题标题】：D3 SVG positioning arrowhead on path [duplicate]D3 SVG在路径上定位箭头[重复]
【发布时间】：2017-07-22 14:20:29
【问题描述】：

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

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

...

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

【问题讨论】：

您必须在 defs 中为每条路径动态构建一个箭头标记，调整每个圆半径的 refX。
看到这个answer I gave here
@Mark 谢谢你的帮助！

标签： javascript d3.js svg force-layout

【解决方案1】：

我根据马克对这个问题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;
});

【讨论】：