CODEWITHSUNDEEP
javascriptcytoscape.js
Derek 朕會功夫
Derek 朕會功夫

Reputation: 94299

Adding edge collapses nodes with CoSE layout

Here I have a simple graph demonstrating the problem:

var cy = cytoscape({
    container: document.getElementById("stage"),
    elements: [{
        data: {id: "a", value: 0}
    }, {
        data: {id: "b", value: 1}
    }, {
        data: {id: "ab", source: "a", target: "b", weight: 10}
    }, {
        data: {id: "c", value: 2}
    }],
    style: [{
        selector: "node",
        style: {
            content: "data(id)",
            "text-valign": "center",
            color: "white",
            "background-color": "mapData(value, 0, 2, red, blue)"
        }
    }],
    layout: {
        name: "cose"
    }
});

For some reason, if I add an edge between two nodes, those two nodes will collapse together (placed on top of each other). Following the CoSE demo on GitHub I have no idea why it is happening. Any ideas?

Demo of the problem: https://jsfiddle.net/DerekL/mthg1uv5/

There should be three nodes: a, b and c, but a and b are placed on top of each other. Drag node b out of the way and you can see node a under it.

Upvotes: 1

Views: 120

Answers (1)

Shields
Shields

Reputation: 76

Not sure if this will meet your requirements or not, but turning on randomization seems to fix the issue.

Like so: 

layout: {
    name: "cose",
    randomize: true
}

You can also fix it by changing the layout type - I tried 'breadthfirst' and it didn't have the issue. I'm not well versed enough to explain why cose doesn't work as you'd like, but hopefully this helps. From my research, everyone seems to praise the cose-bilkent layout as an alternative to cose, so it may be worth seeing if that will meet your needs.

Upvotes: 1

Related Questions