Two-way arrows possible in force directed graph?

Question

I have created a graph similar to this force directed graph: http://bl.ocks.org/d3noob/5141278 :

Using the link as an example: Sarah is linked to James and James is linked to Sarah. Instead of cluttering up the page with two arrows (one in each direction), is there a way to make it have just one arrow with triangles on both ends?

Answer 1

All you have to do to achieve this is add another marker to the links:

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

Example here. This doesn't work perfectly though because of the way the SVG spec specifies how the direction the arrow is pointing in should be computed, in particular:

If there is only a path segment going out of the vertex (e.g., the first vertex on an open path), the marker's positive x-axis should point in the same direction as the tangent vector for the path segment going out of the vertex. (Refer to ‘path’ element implementation notes for a more thorough discussion of the directionality of path segments.)

In those cases, you could calculate and specify the angle of the arrow yourself to fix the orientation.

Answer 2

I had the same problem today. I wanted two arrows with different directions on one link. The solution is simple, just change the path of the shape.

So first create two arrow defs:

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

As you can see, one is called "markerStart" and one "markerEnd", they are now in the opposite direction.

The path looks like this then:

hlink.enter().append("path")
    .attr("class", "hlink")
    .attr("marker-start", "url(#markerStart)")
    .attr("marker-end", "url(#markerEnd)");