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

Question

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

我在收到数据时正确配置了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文件中生成一个错误，但add方法有效，图表显示新元素，但我无法再选择或移动元素。

  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()（强制性地）修改dev定义的每元素数据：http://js.cytoscape.org/#eles.data

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