swoopy.js

define(function(require) {
    
    var d3 = require('./d3v4+jetpack');

    return function swoopy(svg, x0, y0, x1, y1, flipped, r) {
        var dx = x1 - x0, dy = y1 - y0;
        if (r === undefined) r = Math.sqrt(dx*dx + dy*dy) * 0.75;
        var g_arr = svg.append('g.arrow');
          
        var svg_root = d3.select(svg.node().ownerSVGElement || svg.node()),
            defs = svg_root.select('defs');
        if (!defs.node()) defs = svg_root.insert('defs', '*');
        
        var arrowhead = defs.select('marker.arrow'),
            arrId;
        if (!arrowhead.node()) {
            arrId = 'arrow-'+(Math.random()*1e7).toFixed();
            var aw = 20, ah = 10, scale = 0.7;
            aw *= scale;
            ah *= scale;
            arrowhead = defs.append('marker.arrow')
                .at({
                    id: arrId,
                    // width: aw*2,
                    // height: ah*2,
                    viewBox:'0 '+(-ah*0.5)+' '+aw+' '+ah,
                    // viewBox:'0 0 100 100',
                    refX: 0, refY: ah*0.5,
                    // markerWidth: 4,
                    // markerHeight: 4,
                    markerUnits: 'strokeWidth',
                    orient: 'auto'
                }).style('overflow', 'visible');
            arrowhead.append('path')

                .translate([0,0])
                .attr('d', 'M0,'+(-ah*0.5)+' L'+aw+',0 '+[0,ah*0.5]+' Z')
                .style('fill', 'black');
        } else {
            arrId = arrowhead.attr('id');
        }

        g_arr.append('path')
            .style('marker-end', 'url(#'+arrId+')')
            .attr('d', 'M '+[x0, y0]+' A '+[r,r]+' 0 0,'+(flipped ? 1:0)+' '+[x1,y1]);
        
    };
});