QtipがCytoscape.jsのjqueryとajaxで動作しない

Question

ネットワークのノードがクリックされたときにCytoscape JSON要素ファイルを動的に読み込み、qtipテキストを表示しようとしています。この全く同じコードは、コード内のネットワークをハードコードするので、cyjsファイルやqtipコードの部分に何も問題はありません。どうやらqtipはajaxとjqueryで動作していません。

助けていただけたら幸いです！ありがとうございました！

$(function() { 

    $.get('demo.cyjs', function(data) { 
      $('#cy').cytoscape({ 

       layout: { 
        name: 'concentric', 
        concentric: function(node){ 
         return node.degree(); 
        }, 
        levelWidth: function(nodes){ 
         return 2; 
        } 
        }, 
        style: cytoscape.stylesheet() 
        .selector('node') 
        .css({ 
        'content': 'data(name)', 
         'text-valign': 'bottom', 
         'color': 'white', 
         'font-size': 10, 
         'background-color': 'data(faveColor)' 

       }) 
        .selector('edge') 
        .css({ 
        'target-arrow-shape': 'none',    
        'curve-style':'haystack', 
        'line-color':'data(faveColor)', 
        'line-style': 'data(style)', 
        'haystack-radius': 0, 
        'width':'data(Ratio)' 
       }) 
        .selector(':selected') 
        .css({ 
         'background-color': 'grey', 
         'target-arrow-color': 'grey', 
         'source-arrow-color': 'grey', 
          'border-width': 3, 
          'border-color': '#333' 
       }) 
        .selector('.faded') 
        .css({ 
        'opacity': 1, 
         'text-opacity': 0 
       }), 
       elements : JSON.parse(data), 
       }); 
    }) 
    cy.nodes().forEach(function(n){ 
      var a = n.data('ensembl_id'); 
      var p=n.data('primes_id'); 
      var e=n.data('ncbi_id'); 
      var u=n.data('uniprot_id'); 

      n.qtip({ 
      content: [ 

       { 
         name: 'ENSEMBL', 
         url: 'http://www.ensembl.org/Homo_sapiens/Gene/Summary?db=core;g='+ a 
        }, 
        { 
         name: 'UniProt', 
         url: 'http://www.uniprot.org/uniprot/'+ u 
        }, 
        { 
         name: 'NCBI', 
         url: 'https://www.ncbi.nlm.nih.gov/gene/' + e 
        } 
      ].map(function(link){ 
       return '<a target="_blank" href="' + link.url + '">' + link.name + '</a>'; 
      }).join('<br />\n'), 
      position: { 
       my: 'top center', 
       at: 'bottom center' 
      }, 
      style: { 
       classes: 'qtip-bootstrap', 
       tip: { 
       width: 16, 
       height: 8 
       } 
      } 
      }); 
     }); 

     $('#config-toggle').on('click', function(){ 
      $('body').toggleClass('config-closed'); 

      cy.resize(); 
     }); 
     }); 

これは私の更新されたコードです。私は、bodyタグ

<div id="cy"></div> 

    $(function() { 
    let toJson = res => res.json(); 

    let cy = new cytoscape({ 
     layout: { 
      name: 'concentric', 
      concentric: function(node){ 
       return node.degree(); 
      }, 
      levelWidth: function(nodes){ 
       return 2; 
      } 
      }, 
      style: cytoscape.stylesheet() 
     .selector('node') 
     .css({ 
     'content': 'data(name)', 
      'text-valign': 'bottom', 
      'color': 'white', 
      'font-size': 10, 
      'background-color': 'data(faveColor)' 

    }) 
     .selector('edge') 
     .css({ 
     'target-arrow-shape': 'none',    
     'curve-style':'haystack', 
     'line-color':'data(faveColor)', 
     'line-style': 'data(style)', 
     'haystack-radius': 0, 
     'width':'data(Ratio)' 
    }) 
     .selector(':selected') 
     .css({ 
      'background-color': 'grey', 
      'target-arrow-color': 'grey', 
      'source-arrow-color': 'grey', 
       'border-width': 3, 
       'border-color': '#333' 
    }) 
     .selector('.faded') 
     .css({ 
     'opacity': 1, 
      'text-opacity': 0 
    }), 
     elements: fetch('demo.cyjs').then(toJson), 

}); 

    cy.ready(() => { 
    var a = n.data('ensembl_id'); 
    var p=n.data('primes_id'); 
    var e=n.data('ncbi_id'); 
    var u=n.data('uniprot_id'); 

    n.qtip({ 
    content: [ 
     { 
      name:'PrimesDB', 
      url:'http://primesdb.org/molecules/view/'+ p 
     }, 
     { 
       name: 'ENSEMBL', 
       url: 'http://www.ensembl.org/Homo_sapiens/Gene/Summary?db=core;g='+ a 
      }, 
      { 
       name: 'UniProt', 
       url: 'http://www.uniprot.org/uniprot/'+ u 
      }, 
      { 
       name: 'NCBI', 
       url: 'https://www.ncbi.nlm.nih.gov/gene/' + e 
      } 
    ].map(function(link){ 
     return '<a target="_blank" href="' + link.url + '">' + link.name + '</a>'; 
    }).join('<br />\n'), 
    position: { 
     my: 'top center', 
     at: 'bottom center' 
    }, 
    style: { 
     classes: 'qtip-bootstrap', 
     tip: { 
     width: 16, 
     height: 8 
     } 
    } 
    }); 
}); 

$('#config-toggle').on('click', function(){ 
    $('body').toggleClass('config-closed'); 

    cy.resize(); 
}); 

}); 

Answer 1

構造でCY要素を初期化している。このようなあなたのinit：あなたはあなたのJSONファイルからロードするための要素を待っていないので、何の要素ではありません

let toJson = res => res.json(); 

let cy = new Cytoscape({ 
    elements: fetch('some/cytoscape/elements.json').then(toJson), 
    style: fetch('some/cytoscape/style.json').then(toJson), 
    // ... 
}); 

cy.ready(() => { 
    // specify qtips here, after the external data is loaded 
}); 

// or if you prefer promises, you can use a ready promise 
// let readyPromise = new Promise(resolve => cy.ready(resolve)); 

あなたがforEach()をしたときのグラフ。 Cytoscapeに要素の読み込みとスタイルシートの処理をさせることは、しばしば簡単です。インラインオブジェクト/ JSONの代わりに約束を指定するだけです。

コード内に変数cyも表示されません。

cy.ready()コールバックの内容は、initのデータが正しくロードされた後にのみ実行されます。サイドの利点は、スタイルシートを新しいJSONファイルに簡単に分けることができるため、コードを短くしてスタイルシートを簡単に切り替えることができることです。