javascript - 使用 cytoscape 制作没有重叠的图表

Question

我使用 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 和哪些选项一起使用？

Answer 1

你可以使用布局，这样你就不需要为每个节点设置特定的位置。我向您推荐的是 dagre 或 广度优先 布局。

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