用没有重叠的 cytoscape 制作图表答案

【问题标题】：Make a graph with cytoscape without overlaps用没有重叠的 cytoscape 制作图表
【发布时间】：2017-08-04 22:21:39
【问题描述】：

我使用 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 中使用哪种布局和哪些选项？

【问题讨论】：

标签： javascript layout graph overlap cytoscape.js

【解决方案1】：

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

【讨论】：