d3.js - 力有向图中可能有双向箭头吗？

Question

我创建了一个类似于此力导向图的图:http://bl.ocks.org/d3noob/5141278 :

以链接为例:Sarah 链接到 James，James 链接到 Sarah。有没有一种方法可以让它只有一个两端都有三角形的箭头，而不是用两个箭头(每个方向一个)使页面变得困惑？

Answer 1

要实现此目的，您所要做的就是向链接添加另一个标记:

var path = svg.append("svg:g").selectAll("path")
  .data(force.links())
  .enter().append("svg:path")
  .attr("class", "link")
  .attr("marker-end", "url(#end)")
  .attr("marker-start", "url(#end");

示例 here 。但这并不完美，因为 SVG spec 的方式指定如何计算箭头指向的方向，特别是:

If there is only a path segment going out of the vertex (e.g., the first vertex on an open path), the marker's positive x-axis should point in the same direction as the tangent vector for the path segment going out of the vertex. (Refer to ‘path’ element implementation notes for a more thorough discussion of the directionality of path segments.)

在这些情况下，您可以自己计算并指定箭头的角度来固定方向。