Cytoscape.js，在與angular一起使用時未加載圖

Question

我一直在從事將Cytoscape.js與Angular.js結合使用的項目。 我面臨有關圖形加載的問題。 我面臨的問題是刷新頁面時，第一次嘗試時不會加載圖形。

特定的情況是當我在視圖的html中具有圖的視圖時，如果從該視圖刷新頁面，則下次打開圖時，圖將正確顯示。 但是，當我不在帶html的圖形視圖中時，如果從該視圖刷新頁面，則該圖形將不會加載。

我搜索並發現別人遇到了幾乎相似的問題，但解決方案沒有幫助我。

Cytoscape.js，圖形顯示不正確

這是我的HTML代碼。

<div class="col-sm-12" style="height:100%;width:100%;margin-top:5px;">
    <div ng-show="cyLoaded" ng-model="cyLoaded" id="cy" ng-init="ShowProjectRelationGraph(1)" ></div>
    <div ng-show="!cyLoaded" ng-model="cyLoaded" class="row" style="align-items:center;margin-top:100px;">
        <div class="col-sm-5"></div>
        <div class="col-sm-2" style="padding-left:6%">
            <div class="spinner-lg">
                <div class="double-bounce1"></div>
                <div class="double-bounce2"></div>
            </div>
        </div>
    </div>
</div>

這是我的.js代碼

angular.module("VPMWeb")
 .factory('nodesGraph', ['$q', function($q) {
  var cy;
  var nodesGraph = function(elements, signal) {
   var deferred = $q.defer();

   // put people model in cy.js
   var eles = [];
   for (var i = 0; i < elements.nodes.length; i++) {
    eles.push({
     group: 'nodes',
     data: {
      id: elements.nodes[i].data.id,
      parent: elements.nodes[i].data.parent,
      s_id: elements.nodes[i].data.s_id
     }
    });
   }

   for (var i = 0; i < elements.edges.length; i++) {
    eles.push({
     group: 'edges',
     data: {
      id: elements.edges[i].data.id,
      source: elements.edges[i].data.source,
      target: elements.edges[i].data.target,
     }
    });
   }

   $(function() { // on dom ready
    cy = cytoscape({

     container: $("#cy")[0],
     //zoomingEnabled: false,
     userZoomingEnabled: false,

     style: cytoscape.stylesheet()
      .selector('node')
      .css({
       'content': 'data(s_id)',
       'text-valign': 'center',
       'text-halign': 'center',
       'padding-top': '10px',
       'padding-left': '10px',
       'padding-bottom': '10px',
       'padding-right': '10px',
       'text-valign': 'top',
       'text-halign': 'center',
      })
      .selector('edge')
      .css({
       'target-arrow-shape': 'triangle'
      })
      .selector(':selected')
      .css({
       'background-color': 'black',
       'line-color': 'black',
       'target-arrow-color': 'black',
       'source-arrow-color': 'black'
      }),

     layout: {
      name: 'cose',
      padding: 10,
      fit: true,
      randomize: true
     },

     elements: eles,

     ready: function() {
      deferred.resolve(this);
     }
    });

    cy.center();
   }); // on dom ready

   return deferred.promise;
  };

  nodesGraph.listeners = {};

  function fire(e, args) {
   var listeners = nodesGraph.listeners[e];

   for (var i = 0; listeners && i < listeners.length; i++) {
    var fn = listeners[i];

    fn.apply(fn, args);
   }
  }

  function listen(e, fn) {
   var listeners = nodesGraph.listeners[e] = nodesGraph.listeners[e] || [];

   listeners.push(fn);
  }

  return nodesGraph;
 }]);

有人可以看看並提供幫助。 提前致謝。

Answer 1

如果您沒有事先正確設置Cytoscape.js div的尺寸，則必須調用cy.resize() 。

參考：

• http://js.cytoscape.org/#getting-started/includes-cytoscape.js
• http://js.cytoscape.org/#cy.resize