Edge Routing Issue

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <title>cola.js edge routing issue</title>    
    <style>
        @import url(../style.css);
    .background {
        stroke: white;
        stroke-width: 1px;
        fill: white;
    }

.node {
        stroke: black;
        stroke-width: 1.5px;
        cursor: move;
        fill: lightcoral;
    }

.link {
        fill: none;
        stroke: #000;
        stroke-width: 3px;
        opacity: 0.7;
        marker-end: url(#end-arrow);
    }

.label {
        fill: black;
        font-family: Verdana;
        font-size: 25px;
        text-anchor: middle;
        cursor: move;
    }
    </style > 
    </head > 
<body > 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="cola.min.js"></script>

var width = 960, height = 700;

var outer = d3.select("body").append("svg")
            .attr({ width: width, height: height, "pointer-events": "all" });

outer.append('rect')
            .attr({ class: 'background', width: "100%", height: "100%" })
            .call(d3.behavior.zoom().on("zoom", redraw));

var vis = outer
            .append('g')
            .attr('transform', 'translate(250,250) scale(0.3)');

function redraw() {
            vis.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
        }

outer.append('svg:defs').append('svg:marker')
            .attr({
                id: 'end-arrow',
                viewBox: '0 -5 10 10',
                refX: 8,
                markerWidth: 6,
                markerHeight: 6,
                orient: 'auto'
            })
          .append('svg:path')
            .attr({
                d: 'M0,-5L10,0L0,5L2,0',
                'stroke-width': '0px',
                fill: '#000'});

nodes = [];
edges = [];
nodeHash = {};
d3.csv("art_nodes.csv", loadNodes)

function loadNodes(data) {
    data.forEach(function (node) {
        nodes.push(node);
        node.label = node.id;
        node.size = 10;
        node.height = 15;
        node.width = 30;
        nodeHash[node.id] = node;

});
    d3.csv("art_edges.csv", drawCola);
}

function drawCola(data) {

edgeHash = {};
edges = [];
graph = {}

data.forEach(function (edge) {
    if (!nodeHash[edge.source]) {
        console.log(edge.source)
    }
    if (!nodeHash[edge.target]) {
        console.log(edge.target)
    }
    edges.push({source: nodeHash[edge.source],target: nodeHash[edge.target], type:edge.type})

})
graph.nodes = nodes;
graph.links = edges;

d3cola
                .avoidOverlaps(true)
                .convergenceThreshold(1e-3)
                .flowLayout('x', 150)
                .size([width, height])
                .nodes(nodes)
                .links(edges)
                .jaccardLinkLengths(150);

var link = vis.selectAll(".link")
                .data(edges)
                .enter().append("path")
                .attr("class", "link");

var margin = 10, pad = 12;
            var node = vis.selectAll(".node")
                .data(nodes)
                .enter().append("rect")
                .classed("node", true)
                .attr({ rx: 5, ry: 5 })
                .call(d3cola.drag);

var label = vis.selectAll(".label")
                .data(nodes)
                .enter().append("text")
                .attr("class", "label")
                .text(function (d) { return d.label; })
                .call(d3cola.drag)
                .each(function (d) {
                    var b = this.getBBox();
                    var extra = 2 * margin + 2 * pad;
                    d.width = b.width + extra;
                    d.height = b.height + extra;
                });

var lineFunction = d3.svg.line()
                .x(function (d) { return d.x; })
                .y(function (d) { return d.y; })
                .interpolate("linear");

link.attr("d", function (d) {
                    cola.vpsc.makeEdgeBetween(d, d.source.innerBounds, d.target.innerBounds, 5);
                    var lineData = [{ x: d.sourceIntersection.x, y: d.sourceIntersection.y }, { x: d.arrowStart.x, y: d.arrowStart.y }];
                    return lineFunction(lineData);
                });

label
                    .attr("x", function (d) { return d.x })
                    .attr("y", function (d) { return d.y + (margin + pad) / 2 });

}).on("end", routeEdges);
        }

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js