Ajaxを使用してCytoscape.js Panzoomにサーバーデータを入力

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

がどのように設定するか、それがアヤックスを使用してサーバーに自分のデータを操作することができますここに私の設定ファイルでありますか？助けのための

おかげ

Answer 1

一つのオプションは、初期化時にそれらをロードする約束としての要素を指定することです：

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

は、ドキュメントを参照してください：http://js.cytoscape.org/#init-opts/elements

それともどちらかHTTPリクエストを作りますあなたが好む方法（例えばCytoscapeをロードする）は、一般的にそうであるように、後で行います。