Question

这是我的文件graph.json

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

我正在尝试使用下面的代码在CoSE布局中使用cytoscape.js进行可视化。不幸的是，我只得到一个没有任何节点的空图。但是，如果我使用同心的＆＃39;或者＆＃39; grid＆＃39;布局，或者如果我将图形数据直接写入cytoscape.js初始化部分。为什么它不像我做的那样工作：使用＆＃39; CoSE＆＃39;布局和从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的书。

（3）如果您想保持简单，请将fetch承诺作为options.elements传递。阅读init部分以获取更多信息：http://js.cytoscape.org/#core/initialisation

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

1 个答案: