javascript - 如何在运行时更新 cytoscape.js 图形

Question

我正在使用 cytoscape.js 在 HTML 页面中呈现图形。该图表示一个 RDF 图，内容是通过 ajax 请求 REST 服务获得的。此服务允许添加/删除资源和语句，因此我想在每次更改后更新图表。

我在收到数据时正确配置了 cytoscape 对象，但是当我对 rdf 图进行一些更改(添加/删除资源)时，我无法更新该图。现在我尝试这种方法:

• 使用所有设置重新定义 cytoscape 对象，在这种情况下，如果我删除一个元素，图形就会更新，但如果我添加新元素，图形就会消失。

• 使用以下函数更新 cytoscape 对象，在这种情况下，如果我删除一个元素，图形会更新，但节点的位置会更改(所有节点重叠)。当我添加新元素时，图形消失了。

  function updateGraph(graph){
    console.log("update graph");
    cy.$('node').remove();
    cy.$('edge').remove();
    cy.add(graph);
  }
  

• 仅添加和删除感兴趣的元素，为此我创建了一个函数来查找新旧图形之间的差异，然后我调用了以下函数。在这种情况下，cy.remove(elem[j]) 在 cytoscope.js 文件中生成了一个错误，但添加方法有效，图表显示了新元素，但我无法再选择或移动元素。

  function addElements(elem){
    for (j in elem) {
    cy.add(elem[j]);
    }
  }
  
  function removeElements(elem){
    for (j in elem) {
     cy.remove(elem[j]);
    }
  }
  

• 我也关注这个答案Replace all elements and redraw graph softly in cytoscape.js但没有成功。

我的问题是如何在运行时更新图形元素而不更改样式、位置和其他设置？

Answer 1

使用 eles.data() 来(强制性地)修改开发定义的、每个元素的数据:http://js.cytoscape.org/#eles.data

如果您想以声明方式指定图形的突变，请使用 cy.json():http://js.cytoscape.org/#cy.json