javascript - Cytoscape.js：尝试将节点添加到图形时“未捕获的错误：元素必须具有核心引用和参数集”

Question

我正在尝试编写一个脚本来使用 AJAX 将数据从我的 Python/Flask 应用程序发送到 Cytoscape.js（都在同一主机上运行）。我希望能够让我的 cytoscape 图轮询来自 的更新/update_graph，这是一个烧瓶端点，它返回描述节点/边缘的 JSON 数据以添加到图中。我可以创建单个节点并将它们添加到图表中，但是当我尝试从函数中这样做时，它会失败并出现错误"Uncaught Error: An element must have a core reference and parameters set"。

我像这样初始化 cytoscape：

var cy = cytoscape({
    container: $('#cytoscape_panel'), // container to render in

    elements: $.getJSON('/update_graph'),

    style: [
        { selector: 'node', 
          style: { 'background-color': '#666', 
                   'label': 'data(id)'}},
        { selector: 'edge', 
          style: { 'width': 3,
                   'line-color': '#ccc', 
                   'target-arrow-color': '#ccc', 
                   'target-arrow-shape': 'triangle'}}],

    layout: { name: 'grid', rows: 1 }});

然后我将它包含在我的 HTML 中，如下所示：

<div class="grid-container">
  <div id="cytoscape_panel" class="grid-item"></div>
  <div id="info_panel" class="grid-item"></div>
</div>

<script src="js/cytoscape.umd.js"></script>
<script src="js/cytoscape_panel.js"></script>

我在初始化期间创建的节点在那里，并且在我加载页面时正确显示。我可以通过执行以下操作手动添加节点：

d = $.getJSON('/update_graph');
cy.add(d['responseJSON'])
cy.fit()

...再次，新节点将正确显示。但是，当我采用完全相同的代码并尝试将其放在函数中时，它不起作用：

function foo (){
    d = $.getJSON('/update_graph');
    cy.add(d['responseJSON']);
    cy.fit();
}

没有创建新节点，我收到以下错误：

"cytoscape.umd.js:1192 Uncaught Error: An element must have a core reference and parameters set
    at error (cytoscape.umd.js:1192)
    at new Element (cytoscape.umd.js:1430)
    at Core.add (cytoscape.umd.js:13340)
    at foo (<anonymous>:3:8)
    at <anonymous>:1:1

这个错误是什么意思？是否有一些我不理解的关于 Javascript 变量范围规则的东西，这使得我无法像这样访问函数内部的 cy 对象？

标签： javascriptjsonajaxflaskcytoscape.js