Cytoscape.js,是不是有正确的设置显示的图表(Cytoscape.js, graph is

2019-11-03 14:26发布

好日子所有。

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

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

我从cytoscape.js页空白的画布。 所有帆布有宽度屏幕宽度,但高度= 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元素的宽度不自动增加,你可以预期。 在我的情况 - 我看到了我的cyGraph我增加了高度,以100%之后。 但它的奇怪的是,我有100%的宽度就没有样式编辑。 我希望我的例子并回答CA帮助任何人。



文章来源: Cytoscape.js, graph is not displayed with correct settings