Comment mettre à jour le graphique cytoscape.js pendant l'exécution

Question

J'utilise cytoscape.js pour rendre des graphiques dans la page HTML. Le graphe représente un graphe RDF et le contenu est obtenu par requête ajax au service REST. Ce service permet d'ajouter/supprimer des ressources et des instructions, donc je veux mettre à jour le graphique après chaque changement.

Je configure correctement l'objet cytoscape quand je reçois les données mais quand je fais un changement au graphe rdf (ajouter/supprimer une ressource) je ne suis pas capable de mettre à jour le graphe. Pour l'instant, j'essaie cette approche:

• Redéfinir l'objet Cytoscape avec tous les paramètres, dans ce cas, si je retire un élément graphique est mis à jour, mais si j'ajouter nouvel élément graphique disparait.

• Mettre à jour l'objet cytoscape avec la fonction suivante, dans ce cas si je supprime un élément, le graphique est mis à jour mais la position du noeud est modifiée (tous les nœuds se chevauchent). Quand j'ajoute un nouvel élément, le graphique disparaît.

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

• Ajouter et supprimer uniquement l'élément intéressé, pour ce faire, je l'ai créé une fonction pour trouver la différence entre l'ancien et le nouveau graphique puis j'appelle les fonctions suivantes. Dans ce cas, le cy.remove(elem[j]) génère une erreur dans les fichiers cytoscope.js mais la méthode add fonctionne, le graphique montre le nouvel élément mais je ne peux plus sélectionner ou déplacer les éléments.

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

• Je suis également cette réponse Replace all elements and redraw graph softly in cytoscape.js mais sans succès.

Ma question est de savoir comment je peux mettre à jour les éléments du graphique pendant l'exécution sans changement de style, de position et d'autres paramètres?

Answer 1

Utilisez eles.data() à (impérieusement) modifier défini dev, données par élément: http://js.cytoscape.org/#eles.data

Utilisez cy.json() si vous souhaitez spécifier des mutations au graphique déclarative: http://js.cytoscape.org/#cy.json