问题描述
我在这里使用示例中的力导向图 - http://bl.ocks.org/mbostock/4062045
I am using the force-directed graph in the sample here - http://bl.ocks.org/mbostock/4062045
但由于我的数据是有向的,我需要将图中的链接表示为箭头连接.也许就像 http://bl.ocks.org/d3noob/5141278.
But since my data is directed, I need the links in the graph to be represented as arrow connections. Maybe like in, http://bl.ocks.org/d3noob/5141278.
有人可以建议创建有向图的更改或添加,如 http://bl.ocks.org/mbostock/4062045
Can someone please suggest the alterations or additions that create a directed graph as in http://bl.ocks.org/mbostock/4062045
我是 D3 的新手,我找不到解决方案,也许它微不足道,但感谢您的帮助.
I am new to D3, and I couldn't find a solution, maybe its trivial, but a little help is appreciated.
推荐答案
合并这两个例子很简单,我创建了一个 JSFiddle 来演示.首先,在SVG中添加箭头样式的定义:
Merging these two examples is straightforward, and I created a JSFiddle to demo. First, add the definition of the arrow style to the 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");
然后只需将标记添加到您的链接
Then just add the marker to your links
.attr("marker-end", "url(#end)");
你最终会得到这样的结果:
You end up with something like this:
您会看到有些箭头比其他箭头大,因为并非所有链接都具有相同的stroke-width
.如果你想让所有的箭头都一样大小,只要修改
You'll see that some arrows are bigger than others, because not all links have the same stroke-width
. If you want to make all the arrows the same size, just modify
.style("stroke-width", function(d) { return Math.sqrt(d.value); })
添加链接时.
这篇关于在 Force Directed Graph d3 中引入 Arrow(directed)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!