Question

我一直在研究一个项目，我在其中使用Cytoscape.js和Angular.js。我正面临着关于加载图表的问题。我面临的问题是，在刷新页面时，图表不会在第一次尝试时加载。

具体情况是当我在视图的html中使用图表时，如果我从该视图刷新页面，下次打开图表时，图表会正确显示。但是当我没有使用图表的视图时，如果我从该视图中刷新页面，图表将无法加载。

我搜索并发现了其他人面临的类似问题，但解决方案并没有帮助我。

Cytoscape.js, graph is not displayed with correct settings

这是我的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()。

参考：

使用角度时不会加载Cytoscape.js，Graph

1 个答案: