好日子所有。
我提前道歉信的任何错误。 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>
我不明白,我错了。