Angularjs의 Sigma.js
-
21-12-2019 - |
문제
각도 지침 내부의 sigma.js를 사용하는 데 어려움이 있습니다.
복용중인 단계 :
- yeoman과 함께 앱을 만들었습니다.
- Sigma를 Bower_Component로 설치했으며
npm run build
를 실행하여 Pinifiedsigma.min.js
를 획득했습니다.
- 내
index.html
의 스크립트로 추가했습니다.
-
sigma
에서app.js
의 종속성으로 추가되었습니다. -
sigma
로 내 지시문에서 의존성으로 가져 왔습니다.
내가 얻는 오류는 다음과 같습니다. module 'sigma' is not available
아무도 무슨 일이 일어나는지에 대한 아이디어가 있습니까?
이것은 코드입니다. app.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) 지시문을 만들었습니다.이 요지에 있습니다.
그것은 기본 (그래프, 너비, 높이)만이 있지만 쉽게 확장 될 수 있습니다.
여기에 알몸 지침이 있습니다.전체 예제는 GIST를 참조하십시오.
(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와 그 플러그인을 각도로 통합하는 가이드를 작성하고 있습니다.JS "rel="Nofollow "> https://github.com/linkurious/linkurious.js/wiki/how-to-integrate-with-angular.js
이 접근법은 연결된 기업에서 성공적으로 구현되며 수천 개의 노드와 가장자리와 함께 작동합니다.
Sigma.js is not an angular module, so you cannot require it. It's a standlone Javascript library. If you just want to use Sigma.js in a directive, you only have to add it to your index.html