NOTES: line marker-mid. usage of svg marker to place directional arrows on line (needs to be segmented)

app.js

// <marker id="direction-marker" viewBox="0 -5 10 10"  markerWidth="6" markerHeight="6" orient="auto"><path d="M0,-5L10,0L0,5"></path></marker>

function updateDirectionMarkers(linkData, namespace) {
    var line = d3.svg.line()
                .x(function(d) { return d.x; })
                .y(function(d) { return d.y; });
    var linkData = linkData.map(function(d) {
        var midX = (d.source.x + d.target.x)/2;
        var midY = (d.source.y + d.target.y)/2;
        return [
            {
                x : d.source.x,
                y : d.source.y,
                _id : d.source._id + '.' + d.target._id
            }
            ,
            {
                x : midX,
                y : midY
            }
        ];
    })

    var classname = 'link-' + namespace;
    var link = World.container.selectAll("path." + classname)
                .data(linkData, function(d) { return namespace + d[0]._id; });

    var linkEnter = link.enter().insert("svg:path", "g")
        .attr('marker-end', "url(#direction-marker)")
        .attr("class", classname)
        .attr("d", line);

    link.transition()
        .duration(World.duration)
            .style('stroke-opacity', 1)
            .attr("d", line);

    link.exit().remove();

    return link;
}