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 middle of the links instead of the end.

Playing with the attr("refX", 0) of the marker doesn't help much, because it's absolute and not relative to the link length - my links have varying lengths.

I've been googling around, and my best idea was to replace link.attr("marker-end", ...) with link.attr("marker-segment", ...) according to this example (look for the crosses in the middle of the graphs). But this doesn't seem to work.. I'm guessing because it's part of SVG2 draft only but my browser supports a lower version? (I'm using the most recent ver of Chrome btw).

How can I place the arrowheads in the middle of the links?

Answer 1

Instead of placing the marker on an end, create your lines (<polyline> or <path>) 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.

Answer 2

I'm the OP, this answer is just an addition to the excellent answers above for the sake of others with the same question.

The answers show how to achieve this for a graph with arc links. If you have straight links, the accepted answer needs to be modified slightly. This is how:

Your straight links are probably implemented with line, they need to be converted into polyline. Like so:

// old: svg.selectAll(".link").data(links).enter().append("line")
svg.selectAll(".link").data(links).enter().append("polyline")

Then we have to encode the polyline according to this example, so your original code that encodes the line:

force.on("tick", function() {
   link.attr("x1", function(d) {return d.source.x;})
       .attr("y1", function(d) {return d.source.y;})
       .attr("x2", function(d) {return d.target.x;})
       .attr("y2", function(d) {return d.target.y;});

Changes into:

force.on("tick", function() {
   link.attr("points", function(d) {
      return d.source.x + "," + d.source.y + " " + 
             (d.source.x + d.target.x)/2 + "," + (d.source.y + d.target.y)/2 + " " +
             d.target.x + "," + d.target.y; });

And last, don't forget the convert marker-end to marker-mid:

// old: link.attr("marker-end",
link.attr("marker-mid",

Credits to @Phrogz for showing the way.

Answer 3

I took a slightly different approach from Phrogz. I tried removing the path's marker and instead draw it using a new path that goes to the arc's midpoint and whose stroke is invisible. Computing the midpoint is a little finicky so if you want to change the characteristics of the arc you might be better served with Phrogz's approach, or some hybrid.

In this case the trig is not so bad because if you look closely you will notice the arc used to generate the links are from a circle with the same radius and the distance between the nodes. So you have an equilateral triangle and all you need to do really is compute the distance passed the midpoint of the link line segment to the arc midpoint.

I think I need a diagram to explain:

So triangle ABC is equilateral and EC bisect AB. Since we have coordinates for A and B finding M is easy (average the coordinates). It means we also know the slope from A to B (delta y / delta x) so the slope from M to E is the negative inverse. Knowing M and the slope to E means we are almost there, we just need to know how far to go.

To do that we use the fact that ACM is a 30-60-90 triangle and so

|CM| = sqrt(3) * |AM|

but |AM| = |AB| / 2 and |CE| = |AB|

So

|ME| = |AB| - sqrt(3) * |AB| / 2

In order for this length to make sense we will have to normalize it with the length of the slope vector, which we already know is the same as the circle's radius.

Anyway, putting it all together you get:

var markerPath = svg.append("svg:g").selectAll("path.marker")
  .data(force.links())
  .enter().append("svg:path")
  .attr("class", function(d) { return "marker_only " + d.type; })
  .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });


... later in the tick handler

markerPath.attr("d", function(d) {
  var dx = d.target.x - d.source.x,
      dy = d.target.y - d.source.y,
      dr = Math.sqrt(dx * dx + dy * dy);

  // We know the center of the arc will be some distance perpendicular from the
  // link segment's midpoint. The midpoint is computed as:
  var endX = (d.target.x + d.source.x) / 2;
  var endY = (d.target.y + d.source.y) / 2;

  // Notice that the paths are the arcs generated by a circle whose 
  // radius is the same as the distance between the nodes. This simplifies the 
  // trig as we can simply apply the 30-60-90 triangle rule to find the difference
  // between the radius and the distance to the segment midpoint from the circle 
  // center.
  var len = dr - ((dr/2) * Math.sqrt(3));

  // Remember that is we have a line's slope then the perpendicular slope is the 
  // negative inverse.
  endX = endX + (dy * len/dr);
  endY = endY + (-dx * len/dr);

  return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + endX + "," + endY;
});

Check it out here. Note that my path css for the marker path's is set to a transparent red, normally you would want to set stroke to 'none' to hide the lines.