力有向图中可能的双向箭头？答案

【问题标题】：Two-way arrows possible in force directed graph?力有向图中可能的双向箭头？
【发布时间】：2013-12-24 05:35:39
【问题描述】：

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

以链接为例：Sarah 与 James 相关联，James 与 Sarah 相关联。有没有办法让它只有一个两端带有三角形的箭头，而不是用两个箭头（每个方向一个）弄乱页面？

【问题讨论】：

嗨！你能告诉我你是否有这个例子但用矩形而不是圆圈？谢谢

标签： d3.js directed-graph force-layout

【解决方案1】：

我今天也遇到了同样的问题。我想要一个链接上有两个方向不同的箭头。解决方法很简单，只要改变形状的路径即可。

所以首先创建两个箭头定义：

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

【讨论】：

【解决方案2】：

您所要做的就是在链接中添加另一个标记：

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 轴应指向与离开该顶点的路径段的切向量相同的方向顶点。（有关路径段方向性的更全面讨论，请参阅“路径”元素实现说明。）

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

【讨论】：

我试图添加这个，不幸的是我仍然有两行，现在在我的节点的另一侧有一个额外的箭头。我创建了一个 jfiddle：jsfiddle.net/6w2La
是的，正如我所说，这是由于 SVG 规范。除了在相反方向上画第二条（相同的）线来给人一种箭头指向正确方向的印象之外，没有简单的方法可以解决这个问题。
我假设您在发布评论时正在编辑您的答案（我在您的答案的编辑部分出现在我的屏幕上之前添加了我的评论 - 并没有忽略您所写的内容）。我想我可能会看看在这样的示例中添加箭头 (bl.ocks.org/mbostock/2706022) 是否会更好...
我没有画第二条线，而是去掉了线条的曲率。请参阅下面的调整刻度函数： 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); 返回 "M" + d.source.x + "," + d.source.y + " " + d.target.x + ", " + d.target.y; });这是查看结果的更新小提琴：jsfiddle.net/6w2La/2