布局和加载元素的异步问题

Question

这是我的文件graph.json

{
"nodes":[                                               
  {"data":{"id": "Node 1"}},
  {"data":{"id": "Node 2"}}                                                 
],                                                  
"edges":[
  {"data":{"source":"Node 1", "target":"Node 2"}}
]
}

我正在尝试使用下面的代码在 CoSE 布局中使用 cytoscape.js 进行可视化。不幸的是，我只得到一个没有任何节点的空图。但是，如果我使用 'concentric' 或 'grid' 布局，或者如果我将图形数据直接写入 cytoscape.js 初始化部分，它确实有效。为什么它不像我那样工作：使用 'CoSE' 布局和从 JSON 文件加载的图表？

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.js"></script>

<script>
$(function () {

$('#cy').cytoscape({

    layout: {name: 'cose'},

    style: cytoscape.stylesheet()

    .selector('node')
    .css({'content': 'data(id)'}),

    ready: function () {window.cy = this;}

});

$.getJSON('graph.json', function(data) {cy.load(data)});

});
</script>

</head>

<body>
<div id="cy" style="height: 100%; width: 100%; position: absolute; left: 0; top: 0;">
</div>

</body>
</html>

Answer 1

(1) Cytoscape 完全按照您的指示进行操作。您初始化时没有任何元素，运行 CoSE 在它们上面。您异步加载其他元素，这肯定会在 init 之后发生。

(2) This blog 似乎对 sync/async 有一个不错的描述。如果您是 JS 语言的新手，或者您是一般编程新手，则可能需要阅读有关 JS 的书籍。

(3) 如果你想保持简单，传递一个 fetch promise as options.elements. Read the init section for more info: http://js.cytoscape.org/#core/initialisation

布局和加载元素的异步问题

Async troubles with layout and loading elements

javascript

json

graph

cytoscape.js