D3 Examples - Edge Routing Issue

xxxxxxxxxx
 
<!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>
​
    <script>
        var d3cola = cola.d3adaptor().convergenceThreshold(0.1);
​
        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");
​
            var routeEdges = function () {
                d3cola.prepareEdgeRouting();
                link
                .transition()
                .duration(5000)
                .attr("d", function (d) {
                    return lineFunction(d3cola.routeEdge(d));
                });
            }
            d3cola.start(50, 100, 200).on("tick", function () {
                node.each(function (d) { d.innerBounds = d.bounds.inflate(-margin); })
                    .attr("x", function (d) { return d.innerBounds.x; })
                    .attr("y", function (d) { return d.innerBounds.y; })
                    .attr("width", function (d) {
                        return d.innerBounds.width();
                    })
                    .attr("height", function (d) { return d.innerBounds.height(); });
​
                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>
​
    