javascript - 更改 D3 定向力图中箭头标记的方向

Question

我正在尝试在每个链接中插入一个箭头标记。但我想改变箭头的方向，使它们面向每个链接的另一端。

代码如下:

    svg.append("svg:defs").selectAll("marker")
        .data(["end"])      // Different link/path types can be defined here
      .enter().append("svg:marker")
        .attr("id", "end")    // This section adds in the arrows
        .attr("viewBox", "0 -5 10 10")
        .attr("refX", 15)
        .attr("refY", -1.5)
        .attr("markerWidth", 6)
        .attr("markerHeight", 6)
        .attr("orient", 180)
      .append("svg:path")
        .attr("d", "M0,-5L10,0L0,5");

    // add the links and the arrows
    var pg = svg.append("svg:g").selectAll("path")
        .data(force.links())
      .enter().append("g");

    var path = pg.append("path")
        .attr("class", "link")
        .attr("marker-end", "url(#end)")

这怎么可能？

我尝试更改 .attr("marker-end", "url(#end)");

for .attr("marker-end", "url(#start)");

但随后标记就消失了。我想知道的另一件事是代码的哪一部分定义了链接的曲率以及如何更改它。

谢谢。

Answer 1

您应该查看标记的“orient” 属性:https://www.w3.org/TR/svg-markers/#OrientAttribute

在您的情况下，类似: .attr("orient", "auto-start-reverse") 或 .attr("orient", 180) 可以使用.

可以在这篇文章中找到示例:Display an arrow head in the middle of D3 force layout link

关于曲率，相关部分是

dr = Math.sqrt(dx * dx + dy * dy);

随着半径 dr 变大，会有更多的曲线。