用服務器數據填充Cytoscape.js Panzoom使用Ajax

Question

我使用Cytoscape.js Panzoom。它適用於靜態數據。現在我需要填寫圖表和服務器的數據。

這裏是我的配置文件

//代碼放在這裏

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(); 

如何配置或使其與我的數據使用Ajax的服務器中的工作嗎？

感謝您的幫助

Answer 1

一個選項是指定的元素作爲承諾來加載它們在INIT：

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

請參閱該文檔：http://js.cytoscape.org/#init-opts/elements

或者只是做一個HTTP請求爲準之後你會喜歡這種方式，然後使用響應（例如加載Cytoscape），就像你通常那樣。

另請參見fetch(),XMLHTTPRequest