力导向图中可以使用双向箭头吗？

Question

我已经创建了一个类似于这个力导向图的图表：http://bl.ocks.org/d3noob/5141278 ： 以链接为例：Sarah与James相连，James与Sarah相连。有没有办法只用一条箭头，并在两端添加三角形，而不是用两个方向上的箭头使页面混乱？

- Bubbles

---

你好！你能告诉我是否有这个示例，但是使用矩形而不是圆吗？谢谢。 - Alan Grosz

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");

这里有一个例子（点击此处）。但是由于SVG规范指定了箭头指向的方向应如何计算，因此它并不完美，特别是：

如果只有一个从顶点出发的路径段（例如，开放路径上的第一个顶点），则标记的正x轴应指向从顶点出发的路径段的切向量的相同方向。（有关路径段方向性的更彻底讨论，请参阅“路径”元素实现说明。）

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

- Lars Kotthoff

---

我试图添加这个，不幸的是我还是有两行，并且现在在我的节点的另一边多了一个箭头。我已经创建了一个 JFiddle：http://jsfiddle.net/6w2La - Bubbles

是的，正如我所说，这是由于SVG规范。除了绘制一个相反方向的第二条（相同的）线来给出箭头指向正确方向的印象之外，没有简单的解决方法。 - Lars Kotthoff

我猜你在我发表评论的时候正在编辑你的回答（在你编辑的部分出现在我的屏幕之前，我已经添加了我的评论 - 我没有忽略你所写的内容）。我认为我可以尝试将箭头添加到像这样的示例中（http://bl.ocks.org/mbostock/2706022），这样会更好一些... - Bubbles

与其画第二条线，我最终选择消除了该线的曲率。请参见下面调整后的刻度函数：function tick() { path.attr("d", function(d) { var dx = d.target.x - d.source.x, dy = d.target.y - d.source.y, dr = Math.sqrt(dx * dx + dy * dy); return "M" + d.source.x + "," + d.source.y + " " + d.target.x + "," + d.target.y; });这是更新后的 fiddle，可查看结果：http://jsfiddle.net/6w2La/2/ - Bubbles

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");

正如你所看到的，一个被称为“markerStart”，另一个被称为“markerEnd”，它们现在是相反的方向。

路径看起来就像这样：

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

- Highriser