block by emeeks 34cdccd1aebd04d09b35

Edge Routing Issue

Full Screen

index.html

<!DOCTYPE html>
<html xmlns="//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>

art_edges.csv

source,target,type
JAPANESE PRINTS,SYNTHETISM,solid
JAPANESE PRINTS,FAUVISM,solid
Van Gogh,FAUVISM,solid
SYNTHETISM,FAUVISM,solid
Cezanne,SYNTHETISM,solid
Cezanne,FAUVISM,solid
Cezanne,CUBISM,solid
NEO-IMPRESSIONISM,FAUVISM,solid
NEO-IMPRESSIONISM,FUTURISM,solid
NEO-IMPRESSIONISM,CUBISM,solid
Rousseau,CUBISM,solid
Redon,(ABSTRACT) EXPRESSIONISM,dashed
Redon,(ABSTRACT) SURREALISM,dashed
NEAR-EASTERN ART,FAUVISM,solid
NEAR-EASTERN ART,(ABSTRACT) EXPRESSIONISM,solid
FAUVISM,(ABSTRACT) EXPRESSIONISM,solid
NEGRO SCULPTURE,FAUVISM,solid
NEGRO SCULPTURE,CUBISM,solid
CUBISM,FUTURISM,solid
CUBISM,ORPHISM,solid
CUBISM,(ABSTRACT) DADAISM,solid
CUBISM,PURISM,solid
CUBISM,DE STIJL and NEOPLASTICISM,solid
CUBISM,SUPREMATISM,solid
CUBISM,CONSTRUCTIVISM,solid
MACHINE ESTHETIC,FUTURISM,solid
MACHINE ESTHETIC,(ABSTRACT) DADAISM,solid
MACHINE ESTHETIC,Brancusi,dashed
MACHINE ESTHETIC,PURISM,solid
MACHINE ESTHETIC,MODERN ARCHITECTURE,solid
MACHINE ESTHETIC,DE STIJL and NEOPLASTICISM,solid
MACHINE ESTHETIC,BAUHAUS,solid
MACHINE ESTHETIC,SUPREMATISM,solid
MACHINE ESTHETIC,CONSTRUCTIVISM,solid
MACHINE ESTHETIC,CUBISM,solid
(ABSTRACT) EXPRESSIONISM,NON-GEOMETRICAL ABSTRACT ART,solid
(ABSTRACT) EXPRESSIONISM,BAUHAUS,solid
FUTURISM,(ABSTRACT) DADAISM,solid
Brancusi,NON-GEOMETRICAL ABSTRACT ART,solid
SUPREMATISM,BAUHAUS,solid
SUPREMATISM,GEOMETRICAL ABSTRACT ART,solid
CONSTRUCTIVISM,BAUHAUS,solid
CONSTRUCTIVISM,GEOMETRICAL ABSTRACT ART,solid
(ABSTRACT) DADAISM,(ABSTRACT) SURREALISM,solid
PURISM,MODERN ARCHITECTURE,dashed
DE STIJL and NEOPLASTICISM,MODERN ARCHITECTURE,dashed
DE STIJL and NEOPLASTICISM,GEOMETRICAL ABSTRACT ART,solid
DE STIJL and NEOPLASTICISM,BAUHAUS,solid
BAUHAUS,MODERN ARCHITECTURE,dashed
(ABSTRACT) SURREALISM,NON-GEOMETRICAL ABSTRACT ART,solid

art_nodes.csv

id,type,decoration
JAPANESE PRINTS,red,box
SYNTHETISM,black,arc
FAUVISM,black,arc
Van Gogh,black,arc
Cezanne,black,arc
CUBISM,black,arc
NEO-IMPRESSIONISM,black,arc
FUTURISM,black,arc
Rousseau,black,arc
Redon,black,arc
(ABSTRACT) EXPRESSIONISM,black,arc
(ABSTRACT) SURREALISM,black,arc
NEAR-EASTERN ART,red,box
NEGRO SCULPTURE,red,box
ORPHISM,black,arc
(ABSTRACT) DADAISM,black,arc
PURISM,black,arc
DE STIJL and NEOPLASTICISM,black,arc
SUPREMATISM,black,arc
CONSTRUCTIVISM,black,arc
MACHINE ESTHETIC,red,box
Brancusi,black,arc
MODERN ARCHITECTURE,black,box
BAUHAUS,black,arc
NON-GEOMETRICAL ABSTRACT ART,black,arc
GEOMETRICAL ABSTRACT ART,black,arc