SVG markers don't orient properly on a d3.svg.diagonal curve used as a D3 force layout link

Question

I'm a bit new to SVG and d3.js.

While drawing a graph with D3 force layout, I'm using a simple diagonal line generator and using marker-end to draw arrow heads.

When using arc instead of diagonal generator the arrow heads appear just fine. But using diagonal generator like in the code below doesn't produce proper markers:

var vis = this.vis = d3.select(el).append("svg:svg")
    .attr("width", w)
    .attr("height", h);

var force = d3.layout.force()
    .gravity(0.03)
    .distance(120)
    .charge(-800)
    .size([w, h]);

var linkDiag = d3.svg.diagonal()
    .projection(function(d)
    {
        return [d.x, d.y];
    });

vis.append("svg:defs")
        .selectAll("marker")
    .data(["normal", "special", "resolved"])
   .enter()
        .append("svg:marker")
    .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", "M 0,-5 L 10,0 L0,5");

...and then also:

    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; })
        .attr("d", linkDiag)
        .attr("marker-end", function(d) { return "url(#special)"; });

    });

The markers are not oriented at all with the vertices.

Any help would be appreciated!

Answer 1

It only appears as if the arrows aren't pointing in the right direction because you're moving the arrowhead to a new position via refX and refY.

For example, check out this code which draws diagonals in various directions. The arrowheads appear correctly, with the exception of the one at 180 degrees, but that's probably due to a rounding error.

Now, try changing refX on line 10 to a value of, say, 5. Now, the arrowheads close to the horizontal appear incorrect. To see this more dramatically, try changing the value to 8.

What's happening is you're hiding part of the diagonal so the line appears to be ending at an earlier point, which is curved slightly differently from the actual end-point. The same thing will happen if the arrowhead is too large so that it overlays part of the curve. Note that for diagonals in d3, which are symmetrical bezier curves, the arrowheads should always appear pointing perfectly horizontally or vertically. You can see exactly what's happening by reducing the arrowhead's opacity.