Javascript 在力有向图d3中引入箭头（有向）

我使用样本中的力定向图-

但由于我的数据是定向的，所以我需要将图中的链接表示为箭头连接。也许像在

有人能建议修改或添加创建有向图，如中所示吗

---

我是D3新手，我找不到解决方案，也许它很琐碎，但我非常感谢您的帮助。

合并这两个示例很简单，我创建了一个解决方案。首先，将箭头样式的定义添加到SVG中：

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

然后只需将标记添加到您的

链接中

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

你最终会得到这样的结果：

您将看到一些箭头比其他箭头大，因为并非所有链接的笔划宽度都相同。如果要使所有箭头的大小相同，只需修改

.style("stroke-width", function(d) { return Math.sqrt(d.value); })

---

添加链接时。

也许你会发现使用我创建的库更容易：（它使用d3）。@FelixKling这太棒了！我想我现在就试试这个。