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

您可以使用布局，因此您不需要为每个节点设置specyfic位置。我对您的建议是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)'
                }
            }]
        });
    });

用cytoscape制作一个没有重叠的图表

1 个答案: