力导向图中可能出现双向箭头？

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指定了箭头指向的方向应该如何计算，特别是：

  

如果只有一个路径段离开顶点（例如，开放路径上的第一个顶点），则标记的正x轴应指向与路径段的切线向量相同的方向。顶点。 （有关路径段方向性的更全面讨论，请参阅'path'元素实现说明。）

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

Answer 2

我今天遇到了同样的问题。我希望在一个链接上有两个不同方向的箭头。解决方案很简单，只需更改形状的路径即可。

首先创建两个箭头defs：

vis.append("defs").selectAll("marker")
    .data(["arrow"])
    .enter().append("marker")
    .attr("id", "markerEnd")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 19)
    .attr("refY", -0,7)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr('markerUnits', "userSpaceOnUse")
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M0,-5L10,0L0,5");

vis.append("defs").selectAll("marker")
    .data(["arrow"])
    .enter().append("marker")
    .attr("id", "markerStart")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", -12)
    .attr("refY", -0,7)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr('markerUnits', "userSpaceOnUse")
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M0,0L10,-5L10,5Z");

正如你所看到的，有人称之为＆＃34; markerStart＆＃34;和一个＆＃34; markerEnd＆＃34;，他们现在正朝着相反的方向发展。

路径如下：

hlink.enter().append("path")
    .attr("class", "hlink")
    .attr("marker-start", "url(#markerStart)")
    .attr("marker-end", "url(#markerEnd)");