Cytoscape.js, graph is not displayed with correct settings

问题

Good day for all.

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

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

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

<div ng-view></div>

my controller:

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

my controller:

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;
        });
        ...
      }
 ]);

Factory:

    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>

I can't understand where I was wrong.

回答1:

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.

来源：https://stackoverflow.com/questions/28047826/cytoscape-js-graph-is-not-displayed-with-correct-settings

标签

javascript

cytoscape.js