如何在 运行 时间内更新 cytoscape.js 图表

Question

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

我在收到数据时正确配置了 cytoscape 对象，但是当我对 rdf 图（add/delete 资源）进行一些更改时，我无法更新该图。现在我尝试这种方法：

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

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

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

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

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

• 我也按照这个答案但没有成功。

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

Answer 1

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

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