Cytoscape.js，图形显示不正确 [英] Cytoscape.js, graph is not displayed with correct settings

问题描述

大家好。

对于信中的任何错误，我深表歉意。
在D3.js之后，我开始为我学习新的库-cytoscape.js。简单的示例正在工作，但是随后我尝试在我的angular.js-project中使用cytoscape.js-我遇到了一些奇怪的情况：在一个骨架示例之后：

I apologize in advance for any errors in the letter. After D3.js i had started learning new for me library - cytoscape.js. Simple examples is working, but then I try to use in my angular.js-project the cytoscape.js - I had some strange situation: after a skeleton example from this:

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

我从cytoscape.js的页面上获得了空白画布。所有画布的宽度均与屏幕宽度相同，但高度=0。
我检查了我的cy对象-所有元素均按库进行解析，所有元素都有唯一的ID，但所有元素都没有位置：

I get blank canvas on page from cytoscape.js. All canvas has width as screen width, but height = 0. I checked my cy object - all elements was parsing by library, all has unique id, but all Elements don't has position:

x = 0，y = 0

x = 0, y = 0

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

You can see some code below. Main page has directive:

<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：

graphfull.html:

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

我不知道自己哪里错了。

I can't understand where I was wrong.

推荐答案

感谢收看！ =）
答案非常简单-始终检查您的样式，因为有时您html元素的高度和宽度不会像您预期的那样自动增加。就我而言-将高度增加到100％之后，我看到了cyGraph。但是奇怪的是我没有样式编辑就立即拥有100％的宽度。
我希望我的榜样和答案可以帮助任何人。

Thanks for watching! =) The answer is very simple - always check your styles, because sometimes height and width of yours html elements dont increase automatically as you can anticipate. In my case - I saw my cyGraph after I had increased height to 100%. But its strange that I had 100% width right away without style editing. I hope my example and answer ca help anyone.

这篇关于Cytoscape.js，图形显示不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！