Display an arrow head in the middle of D3 force layout link

Question

I\'m using D3 to draw a force-directed graph, which is very similar to this example: http://bl.ocks.org/mbostock/1153292

I\'m trying to place the arrowheads in the m

Answer 1

Instead of placing the marker on an end, create your lines ( or ) with a single point in the middle of the line and use marker-mid to apply the arrowheads.

_{This demo for this answer of mine uses this technique to create multiple interior points along the length of a path along with marker-mid. You would simply be creating a single 'waypoint' instead of many.}

Edit: Here's a simple hack to the existing demo showing what I mean:

Demo: http://jsfiddle.net/tk7Wv/2/

The only changes are:

1. Changing marker-end to marker-mid, and
2. Modifying the path generation code to create two arcs (connected in the middle) instead of one.

It will require some simple trigonometry like Superboggly illustrates to pick an appropriate midpoint based on the amount of bowing you want in your lines.