Javascript 用cytoscape绘制一个没有重叠的图形

我使用cytoscape显示一个节点可以重叠的图形。 我希望避免这种情况，但不改变每个节点的位置y。 我使用节点的位置y来管理级别，但位置x可以毫无问题地变化

        $.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"
        }
        } ]
    }

---

我应该在cytoscape中使用哪个布局以及哪些选项？

您可以使用布局，因此不需要为每个节点设置特定的位置。我向您推荐的是

dagre

或

breadthfirst

布局

    $.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)'
                }
            }]
        });
    });