在Force Directed Graph d3中引入Arrow(定向)

时间:2015-01-20 16:29:46

标签: javascript d3.js force-layout

我在这里使用了样本中的力导向图 - http://bl.ocks.org/mbostock/4062045

但是由于我的数据是定向的,我需要图表中的链接表示为箭头连接。也许就像在http://bl.ocks.org/d3noob/5141278中一样。

有人可以建议在http://bl.ocks.org/mbostock/4062045

中创建有向图的更改或添加内容

我是D3的新手,我找不到解决办法,也许是微不足道的,但是我会感激一点帮助。

1 个答案:

答案 0 :(得分:15)

合并这两个例子非常简单,我创建了一个JSFiddle to demo。首先,将箭头样式的定义添加到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");

然后只需将标记添加到links

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

你最终得到这样的东西:

enter image description here

您会看到某些箭头比其他箭头更大,因为并非所有链接都具有相同的stroke-width。如果您想使所有箭头大小相同,只需修改

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

添加链接时。