Make a graph with cytoscape without overlaps

Question

I use cytoscape to display a graph whose nodes can overlap. I would like to avoid this but without changing the position y of each node. I use the position y of a node to manage levels but the position x can vary without problem.

        $.getJSON("/stratifiant/cytoscape", function(data) {
            var cy = cytoscape({
                container: document.getElementById('container'),
                elements: data,
                style: [{
                    selector: 'node',
                    style: {
                        shape: 'rectangle', 
                        'background-color': 'red',
                        label: 'data(label)'
                    }
                }]
            });
        });

JSON :

    {
        "nodes" : [ {
        "data" : {
            "x" : 0,
            "y" : 0,
            "id" : "120510",
            "label" : "SOG.1006"
        }
        }, {
        "data" : {
            "x" : 100,
            "y" : 0,
            "id" : "120487",
            "label" : "SOG.1005"
        }
        }, {
        "data" : {
            "x" : 200,
            "y" : 0,
            "id" : "120188",
            "label" : "SOG.1002"
        }
        }, {
        "data" : {
            "x" : 300,
            "y" : 0,
            "id" : "120189",
            "label" : "SOG.1003"
        }
        }, {
        "data" : {
            "x" : 400,
            "y" : 0,
            "id" : "120537",
            "label" : "SOG.1008"
        }
        }, {
        "data" : {
            "x" : 0,
            "y" : 100,
            "id" : "120179",
            "label" : "SOG.1000"
        }
        }, {
        "data" : {
            "x" : 100,
            "y" : 100,
            "id" : "120187",
            "label" : "SOG.1001"
        }
        }, {
        "data" : {
            "x" : 0,
            "y" : 200,
            "id" : "120536",
            "label" : "SOG.1007"
        }
        }, {
        "data" : {
            "x" : 100,
            "y" : 200,
            "id" : "120190",
            "label" : "SOG.1004"
        }
        } ],
        "edges" : [ {
        "data" : {
            "id" : "s120510-120487",
            "source" : "120510",
            "target" : "120487"
        }
        }, {
        "data" : {
            "id" : "a120179-120188",
            "source" : "120179",
            "target" : "120188"
        }
        }, {
        "data" : {
            "id" : "s120179-120187",
            "source" : "120179",
            "target" : "120187"
        }
        }, {
        "data" : {
            "id" : "a120536-120187",
            "source" : "120190",
            "target" : "120187"
        }
        }, {
        "data" : {
            "id" : "s120536-120190",
            "source" : "120536",
            "target" : "120190"
        }
        } ]
    }

Which layout should I use with cytoscape with which options?

Answer 1

You could use a Layout, so you dont need set the specyfic place for each node. My recommendation for you is the dagre or breadthfirst layout.

    $.getJSON("/stratifiant/cytoscape", function(data) {
        var cy = cytoscape({
            container: document.getElementById('container'),
            elements: data,
            layout:{
                name:'dagre',
            },
            style: [{
                selector: 'node',
                style: {
                    shape: 'rectangle', 
                    'background-color': 'red',
                    label: 'data(label)'
                }
            }]
        });
    });