Question

所有人的美好时光。

我提前为信中的任何错误道歉。在D3.js之后我开始为我学习新的库 - cytoscape.js。简单的例子是工作，但后来我尝试在我的angular.js项目中使用cytoscape.js - 我有一些奇怪的情况：在这个例子之后：

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

我在cytoscape.js页面上看到空白画布。所有画布的宽度均为屏幕宽度，但height = 0。我检查了我的cy对象 - 所有元素都是按库解析的，都有唯一的id，但是所有的Elements都没有位置：

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，图表不会显示正确的设置

1 个答案: