Cytoscape.js，图表未显示正确的设置

Question

大家好。

对于信中的任何错误，我提前表示歉意。在 D3.js 之后，我开始为我学习新的图书馆 - cytoscape.js。简单的例子是有效的，但后来我尝试在我的 angular.js-project 中使用 cytoscape.js - 我遇到了一些奇怪的情况：在一个骨架示例之后：

http://jsbin.com/gist/a1aea574f0e248b2b38e?js,output

我在 cytoscape.js 的页面上空白 canvas。所有 canvas 的宽度都是屏幕宽度，但高度 = 0。我检查了我的 cy 对象——所有元素都被库解析，都有唯一的 id，但所有元素都没有位置：

x = 0, y = 0

您可以在下面看到一些代码。主页有指令：

<div ng-view></div>

我的控制器：

someName.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/lgraph', {
        templateUrl: 'partials/graphfull.html',
        controller: 'GraphPainterController'
      }).
      otherwise({
        templateUrl: 'partials/mainpage.html'
      });
  }]);

我的控制器：

GraphPainterController.controller('GraphPainterController', ['$scope', 'GraphResource', 'cyGraph', 
  function($scope, GraphResource, cyGraph) {
        ...
        $scope.graph = GraphResource.results;
        cyGraph($scope.graph, $scope).then(function(graphCyObj) {
          cy = graphCyObj;

          $scope.cyLoaded = true;
        });
        ...
      }
 ]);

工厂：

    graphPathControllers.factory('cyGraph', [ '$q', function( $q ){
      var cy;
      var cyGraph = function(graph, scope) {
      var deferred = $q.defer();

  $(function() { // on dom ready

  cy = cytoscape({
    container: $('#cy')[0],
    elements: {
      nodes: nodesReady,
      edges: edgesReady
    },
    style: cytoscape.stylesheet() 
      .selector('edge')
        .css({
          'target-arrow-shape': 'triangle'
        })
      .selector(':selected')
        .css({
          'background-color': 'black',
          'line-color': 'black',
          'target-arrow-color': 'black',
          'source-arrow-color': 'black',
          'text-outline-color': 'black'
        }),
    motionBlur:true,
    wheelSensitivity:0.3,
    layout: {
      name: 'cose',
      refresh: 10, 
      maxSimulationTime: 4000, 
      ungrabifyWhileSimulating: true, layout
      padding: 10,
      randomize: false, 
    ready: function() {
      deferred.resolve( this );
      var currentSelectedForInfoNode;
      cy.elements().unselectify();

      cy.on('cxttapstart', 'node', function(e) {            
          ctxInfo(currentSelectedForInfoNode, this);
      });


      cy.on('tap', 'node', function(e) {
        var node = e.cyTarget; 
        var neighborhood = node.neighborhood().add(node);

        cy.elements().addClass('faded');
        neighborhood.removeClass('faded');
      });

      cy.on('tap', function(e) {
        if (currentSelectedForInfoNode !== undefined) {
          hideCtxInfo(currentSelectedForInfoNode);
        }
        if( e.cyTarget === cy ){
          cy.elements().removeClass('faded');
        }
      });
    }
  });

});

return deferred.promise;}

graphfull.html:

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

我不明白我哪里错了。

Answer 1

感谢收看！ =) 答案很简单 - 始终检查您的样式，因为有时 html 元素的高度和宽度不会像您预期的那样自动增加。就我而言——在我将高度增加到 100% 之后，我看到了我的 cyGraph。但奇怪的是，我没有样式编辑就立即拥有 100% 的宽度。希望我的例子和回答能帮到大家。

Cytoscape.js，图表未显示正确的设置

Cytoscape.js, graph is not displayed with correct settings

javascript

cytoscape.js