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标签中初始化了cy元素

<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

像这样构建你的init：

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

您没有等待从JSON文件加载元素，因此当您执行forEach()时，图表中没有元素。让Cytoscape为您处理元素和样式表的加载通常更容易。只需指定promises来代替内联对象/ JSON。

我也没有在您的代码中看到任何cy变量。

cy.ready()回调中的任何内容只有在init中的数据正确加载后才会执行。另一个好处是，您可以轻松地将样式表分成新的JSON文件，从而缩短代码并使样式表之间更容易切换。

Qtip在Cytoscape.js中没有使用jquery和ajax

1 个答案: