I'm using cytoscape.js to render graphs in HTML page. The graph represent a RDF graph and the content is obtained by ajax request to REST service. This service allow to add/delete resource and statement, so i want to update the graph after each change.

I correctly configure cytoscape object when I receive the data but when I make some change to the rdf graph (add/delete resource) I'm not able to update the graph. For now I try this approaches:

• Redefine the cytoscape object with all the settings, in this case if I remove one element the graph is updated but if i add new element the graph disappears.

• Update cytoscape object with following function, in this case if I remove one element the graph is updated but the position of node is changed (all the node overlaps). When i add new element the graph disappears.

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

• Add and remove only the interested element, to do this I have created one function to find the different between the old and the new graph and then i call the following functions. In this case the cy.remove(elem[j]) generate one error in cytoscope.js files but the add method works, the graph shows the new element but i can't select or move anymore the elements.

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

• I also follow this answer Replace all elements and redraw graph softly in cytoscape.js but without success.

My question is how i can update the elements of graph during run time without change style, position and other settings ?

I'm using cytoscape.js to render graphs in HTML page. The graph represent a RDF graph and the content is obtained by ajax request to REST service. This service allow to add/delete resource and statement, so i want to update the graph after each change.

I correctly configure cytoscape object when I receive the data but when I make some change to the rdf graph (add/delete resource) I'm not able to update the graph. For now I try this approaches:

• Redefine the cytoscape object with all the settings, in this case if I remove one element the graph is updated but if i add new element the graph disappears.

• Update cytoscape object with following function, in this case if I remove one element the graph is updated but the position of node is changed (all the node overlaps). When i add new element the graph disappears.

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

• Add and remove only the interested element, to do this I have created one function to find the different between the old and the new graph and then i call the following functions. In this case the cy.remove(elem[j]) generate one error in cytoscope.js files but the add method works, the graph shows the new element but i can't select or move anymore the elements.

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

• I also follow this answer Replace all elements and redraw graph softly in cytoscape.js but without success.

My question is how i can update the elements of graph during run time without change style, position and other settings ?

• javascript
• cytoscape.js

1 Answer 1

Use eles.data() to (imperatively) modify dev-defined, per-element data: http://js.cytoscape/#eles.data

Use cy.json() if you want to specify mutations to the graph declaratively: http://js.cytoscape/#cy.json