Angularjs 中的 Sigma.js
-
21-12-2019 - |
题
我在 Angular 指令中使用 Sigma.js 时遇到问题。
我正在采取的步骤是:
- 我已经用 yeoman 构建了我的应用程序。
- 我已将 sigma 安装为 Bower_Component 并运行
npm run build
以获得缩小的sigma.min.js
- 我已将其作为脚本添加到我的
index.html
- 我已经添加了
sigma
作为我的依赖app.js
. - 我已将其作为指令中的依赖项导入为
sigma
我收到的错误是: module 'sigma' is not available
有人知道发生了什么事吗?
这是代码:应用程序.js
angular.module('uiApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'd3',
'directives',
'services',
'sigma'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
sigmagraph.js
'use strict';
angular.module('directives')
.directive('sigmagraph',['$log','sigma',function($log,sigma){
return {
scope:true,
restrict:'EA',
link: function (scope,el){
sigma.parsers.json('data.json', {
container: 'container',
settings: {
defaultNodeColor: '#ec5148'
}
});
}
};
}]);
解决方案
谨防: 虽然这应该可行,但实现速度非常慢(请参阅评论)
为了将来参考,我为 AngularJs (1.2.25) 制作了一个简单的 Sigma.Js (v.1.0.3) 指令。可以在这个要点中找到: 简单的 Sigma.Js AngularJs 指令
它仅具有基础功能(图形、宽度、高度),但可以轻松扩展以满足您的需求。
这是赤裸裸的指令。完整示例请参阅要点。
(function() {
'use strict';
angular.module('sigmajs-ng', []).directive('sigmajs', function() {
//over-engineered random id, so that multiple instances can be put on a single page
var divId = 'sigmjs-dir-container-'+Math.floor((Math.random() * 999999999999))+'-'+Math.floor((Math.random() * 999999999999))+'-'+Math.floor((Math.random() * 999999999999));
return {
restrict: 'E',
template: '<div id="'+divId+'" style="width: 100%;height: 100%;"></div>',
scope: {
//@ reads the attribute value, = provides two-way binding, & works with functions
graph: '=',
width: '@',
height: '@',
releativeSizeNode: '='
},
link: function (scope, element, attrs) {
// Let's first initialize sigma:
var s = new sigma({
container: divId,
settings: {
defaultNodeColor: '#ec5148',
labelThreshold: 4
}
});
scope.$watch('graph', function(newVal,oldVal) {
s.graph.clear();
s.graph.read(scope.graph);
s.refresh();
if(scope.releativeSizeNode) {
//this feature needs the plugin to be added
sigma.plugins.relativeSize(s, 2);
}
});
scope.$watch('width', function(newVal,oldVal) {
console.log("graph width: "+scope.width);
element.children().css("width",scope.width);
s.refresh();
window.dispatchEvent(new Event('resize')); //hack so that it will be shown instantly
});
scope.$watch('height', function(newVal,oldVal) {
console.log("graph height: "+scope.height);
element.children().css("height",scope.height);
s.refresh();
window.dispatchEvent(new Event('resize'));//hack so that it will be shown instantly
});
element.on('$destroy', function() {
s.graph.clear();
});
}
};
});
})();
其他提示
我正在编写一份将 Sigma 及其插件集成到 Angular 中的指南,请参阅 https://github.com/Linkurious/linkurious.js/wiki/How-to-integrate-with-Angular.js
这种方法已在 Linkurious Enterprise 中成功实施,并适用于数千个节点和边缘。
Sigma.js 不是一个 Angular 模块,因此您不能需要它。它是一个独立的 Javascript 库。如果您只想在指令中使用 Sigma.js,只需将其添加到您的 index.html 中
不隶属于 StackOverflow