Misaligned arrowheads

[codemacabre]

In working on #141, I've encountered a weird bug with the arrowheads:

I believe it's because of the Bezier curves from bezier.js, so disabling the library entirely and using CSS transform to offset the lines, it improves, but the arrowheads are still misaligned:

Two points:

1. We're currently using the SVGtoBeziers() function which is not recommended to be used and has since been removed.
2. I don't think the CSS approach (second image) is very robust, and may break with larger graphs.

[codemacabre]

On investigation, it looks like the issue is actually the type of curve we're using for the edges in the graph. We're using curveMonotoneX. The best alternatives which don't break arrowheads I've found are using either:

• curveNatural
  

• curveBumpX
  

Neither of these are perfect, so we might have to produce a custom curve ourselves.

[codemacabre]

I've possibly fixed this by modifying the D3 monotoneX curve code to smooth the ends of the lines. The only change was to adjust line 33, from:

that._context.bezierCurveTo(x0 + dx, y0 + dx * t0, x1 - dx, y1 - dx * t1, x1, y1);

to:

that._context.bezierCurveTo(x0 + dx * 0.9, y0 + dx * t0 * 0.9, x1 - dx * 0.9, y1 - dx * t1 * 0.9, x1, y1);

I'll add this change to the latest PR.