Introducing Arrow(directed), in Force Directed Graph d3

Question

I am using the force-directed graph in the sample here - http://bl.ocks.org/mbostock/4062045

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.

Can someone please suggest the alterations or additions that create a directed graph as in http://bl.ocks.org/mbostock/4062045

I am new to D3, and I couldn't find a solution, maybe its trivial, but a little help is appreciated.

Maybe you find it easier to use a library I created: http://jsnetworkx.org/examples.html#example1 (it uses d3). — Felix Kling, Jan 20 '15 at 16:32
@FelixKling This is wonderful ! I think I will try this out now. — minocha, Jan 20 '15 at 16:44

mdml · Accepted Answer · 2015-01-20T16:45:08.797

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:

enter image description here

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

when adding the links.

Introducing Arrow(directed), in Force Directed Graph d3

1 Answers1

Linked