Fill Cytoscape.js Panzoom mit Serverdaten mit Ajax

Question

Ich verwende Cytoscape.js Panzoom. Es funktioniert gut für statische Daten. Jetzt muss ich das Diagramm mit Daten füllen, die für den Server kommen.

Hier ist meine Konfigurationsdatei

// Code hier geht

var CanvasApp = function() { 
      var cy; 
      var playground; 

      return { 
       init: function() { 
        var elem = document.createElement("div"); 
        elem.id = 'cy'; 

        playground = document.getElementById('playground'); 
        playground.appendChild(elem); 

        cy = $(elem).cytoscape({ 
         style: [ 
          { 
           selector: 'node', 
           css: { 
            'content': 'data(name)' 
           } 
          }, 

          { 
           selector: 'edge', 
           css: { 
            'target-arrow-shape': 'triangle' 
           } 
          } 
         ], 

         elements: { 
          nodes: [ 
           {data: {id: 'j', name: 'Jerry'}}, 
           {data: {id: 'e', name: 'Elaine'}}, 
           {data: {id: 'k', name: 'Kramer'}}, 
           {data: {id: 'g', name: 'George'}} 
          ], 
          edges: [ 
           {data: {source: 'j', target: 'e'}}, 
           {data: {source: 'j', target: 'k'}}, 
           {data: {source: 'j', target: 'g'}}, 
           {data: {source: 'e', target: 'j'}}, 
           {data: {source: 'e', target: 'k'}}, 
           {data: {source: 'k', target: 'j'}}, 
           {data: {source: 'k', target: 'e'}}, 
           {data: {source: 'k', target: 'g'}}, 
           {data: {source: 'g', target: 'j'}} 
          ] 
         } 
        }).cytoscape('get'); 

        $(elem).cytoscapePanzoom(); 

       }, 

       destroy: function() { 
        cy.destroy(); 
        cy = null; 
       } 
      } 
     }; 


     var app = new CanvasApp(); 

Wie kann ich konfigurieren oder mache es in dem Server mit meinen Daten zu arbeiten, mit Ajax?

Vielen Dank für Hilfe

Answer 1

Eine Möglichkeit, die Elemente als ein Versprechen zu geben ist, sie bei der init zu laden:

let cy = new Cytoscape({ 
    elements: fetch('blah/blah/blah.json').then(res => res.json()) 
}); 

die Dokumentation Siehe: http://js.cytoscape.org/#init-opts/elements

Oder nur eine HTTP-Anforderung machen je nachdem, welcher wie Sie es bevorzugen und verwenden Sie die Antwort (z. B. laden Cytoscape) danach, als würden Sie im Allgemeinen.

Siehe auch fetch(), XMLHTTPRequest