Javascript 布局和加载元素的异步问题_Javascript_Json_Graph_Cytoscape.js

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

javascript json graph

Javascript 布局和加载元素的异步问题,javascript,json,graph,cytoscape.js,Javascript,Json,Graph,Cytoscape.js,这是我的文件graph.json { "nodes":[ {"data":{"id": "Node 1"}}, {"data":{"id": "Node 2"}} ], "edges":[ {"d

这是我的文件graph.json

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

我正试图使用下面的代码在CoSE布局中使用cytoscape.js将其可视化。不幸的是，我只得到一个没有任何节点的空图。但是，如果我使用“同心”或“网格”布局，或者如果我将图形数据直接写入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>


$（函数（）{
$（'#cy'）。细胞景观({
布局：{name:'cose'}，
样式：cytoscape.stylesheet（）
.selector（'节点'）
.css（{'content'：'data（id）}），
就绪：函数（）{window.cy=this；}
});
$.getJSON（'graph.json'，函数（数据）{cy.load（数据）}）；
});

（1）Cytoscape正是按照您的指示执行的。您在没有任何元素的情况下初始化，并在它们上运行CoSE。异步加载其他元素，这肯定会在init之后发生

（2）似乎对sync/async有很好的描述。如果你对JS语言还是新手，你可能想读一本关于JS的书

（3）如果你想让事情变得简单，就把承诺作为

options.elements

传递。有关更多信息，请阅读init部分：