为 Cytoscape.js 加载和使用 JSON

Question

上下文

我想使用 cytoscape.js 来可视化图表。虽然我能够使用多种语言（C++、Mathematica、R 等），但我是 Javascript、JSON、[=19 的新手=]，以及 CSS。因此，通过这个用例（使用 cytoscape.js 实现图形）来学习这些语言将是有利的。请在回答时牢记这一点。

我之前问过如何[远程加载 and . Since then I have created a script that turns a graph as represented in one of the other languages I use, into the JSON format indicated here。虽然我可以将所有这些直接复制粘贴到我的程序中，但对于大型网络来说，这显然是一种糟糕的实现方式。我的脚本输出示例位于此底部。

问题

给定 JSON object/file(?) 我怎样才能做到以下几点：

无需复制粘贴代码即可将其加载到 cytoscape.js。
加载后引用它。（例如 JSON 语法如何在 cytoscape.js 中使用的基本解释）

脚本输出

cytoscape({

container: document.getElementById('cy'),

elements: [ 
{// node Node 1
    group: 'nodes',

    data: {
        id: 'Node 1'
    },

    selected: false,

    selectable: true,

    locked: false,

    grabbable: true,

    selectable: true,

},
{// node Node 2
    group: 'nodes',

    data: {
        id: 'Node 2'
    },

    selected: false,

    selectable: true,

    locked: false,

    grabbable: true,

    selectable: true,

},
{// node Node 3
    group: 'nodes',

    data: {
        id: 'Node 3'
    },

    selected: false,

    selectable: true,

    locked: false,

    grabbable: true,

    selectable: true,

},
{// edge 1_2
    group: 'edges',

    data: {
        id: '1_2',
        source: '1',
        target: '2'
    }
},
{// edge 2_3
    group: 'edges',

    data: {
        id: '2_3',
        source: '2',
        target: '3'
    }
},
{// edge 3_1
    group: 'edges',

    data: {
        id: '3_1',
        source: '3',
        target: '1'
    }
}
],
style: [
    {
        selector: 'node',
        style: {
            'content': 'data(id)'
        }
    }
]

});

Answer 1

假设您在 'index.html' 所在的文件夹中有一个 json 文件，并且您的服务器是运行。首先通过 http 请求请求 json 文件（使用 plain javascript or jquery ）。

如果您的 json 文件与 elements 属性具有相同的格式，您可以将其解析为 javascript 对象并进行设置。例如

var myObject = {};
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
      myObject = JSON.parse(this.responseText);
      initCytoscape();
  }
};
xhttp.open("GET", "myJson.json", true);
xhttp.send();

function initCytoscape() {
  cytoscape({
    container: document.getElementById('cy'),
    elements: myObject
  });
}

如果 json 属性与 cytoscape 的格式不同，则必须以编程方式进行转换。

Answer 2

<head>
    <title></title>
    <script src="js/vendor/cytoscape.min.js"></script>
    <script src="js/vendor/jquery.min.js"></script>
</head>

<style>
    #cy {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }
</style>

<body>
    <div id="cy"></div>
    <script>
        $.getJSON("cyto.js", function (data) {
            //console.log(data);
            var cy = cytoscape({
                container: document.getElementById('cy'),
                elements: data,
                style: [
                    {
                        selector: 'node',
                        style: {
                            'label': 'data(label)',
                            'width': '60px',
                            'height': '60px',
                            'color': 'blue',
                            'background-fit': 'contain',
                            'background-clip': 'none'
                        }
                    }, {
                        selector: 'edge',
                        style: {
                           'text-background-color': 'yellow',
                            'text-background-opacity': 0.4,
                            'width': '6px',
                            'target-arrow-shape': 'triangle',
                            'control-point-step-size': '140px'
                        }
                    }
                ],
                layout: {
                    name: 'circle'
                }
            });
        });
    </script>
</body>

在cyto.js中你可以输入有效的JSON数据，例如

  {
    "nodes": [
            {
            "data": {"id": "a", "label": "Gene1"}
            },
            {
            "data": {"id": "b", "label": "Gene2"}
            },
            {
            "data": {"id": "c", "label": "Gene3"}
            },
            {
            "data": {"id": "d", "label": "Gene4"}
            },
            {
            "data": {"id": "e", "label": "Gene5"}
            },
            {
            "data": {"id": "f", "label": "Gene6"}
            }
    ],
            "edges": [
            {
            "data": {
            "id": "ab",
                    "source": "a",
                    "target": "b"
            }
            },
            {
            "data": {
            "id": "cd",
                    "source": "c",
                    "target": "d"
            }
            },
            {
            "data": {
            "id": "ef",
                    "source": "e",
                    "target": "f"
            }
            },
            {
            "data": {
            "id": "ac",
                    "source": "a",
                    "target": "d"
            }
            },
            {
            "data": {
             "id": "be",
                    "source": "b",
                    "target": "e"
                }
                }]    
    }

为 Cytoscape.js 加载和使用 JSON

Loading and using JSON for Cytoscape.js

html

cytoscape.js

上下文

问题

脚本输出