Sigma.js en Angularjs
-
21-12-2019 - |
Pregunta
Tengo problemas para usar Sigma.js dentro de una directiva Angular.
Los pasos que estoy tomando son:
- He creado mi aplicación con yeoman.
- Instalé sigma como bower_component y ejecuté
npm run build
para obtener el minifiedsigma.min.js
- Lo he agregado como un script en mi
index.html
- Yo he añadido
sigma
como una dependencia en miapp.js
. - Lo he importado como una dependencia en mi directiva como
sigma
El error que recibo es: module 'sigma' is not available
¿Alguien tiene una idea de lo que está pasando?
Este es el código:aplicación.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'
}
});
}
};
}]);
Solución
Tener cuidado: aunque esto debería funcionar, es una implementación muy lenta (ver comentarios)
Para referencia futura, creé una directiva Sigma.Js (v.1.0.3) simple para AngularJs (1.2.25).Se puede encontrar en esta esencia: Directiva Sigma.Js AngularJs simple
Incluye sólo lo básico (gráfico, ancho, alto), pero puede ampliarse fácilmente según sus necesidades.
Aquí está la directiva desnuda.Consulte la esencia para ver un ejemplo completo.
(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();
});
}
};
});
})();
Otros consejos
Estoy escribiendo una guía para integrar Sigma y sus complementos en Angular, consulte https://github.com/Linkurious/linkurious.js/wiki/How-to-integrate-with-Angular.js
Este enfoque se ha implementado con éxito en Linkurious Enterprise y funciona con miles de nodos y bordes.
Sigma.js no es un módulo angular, por lo que no puede requerirlo.Es una biblioteca Javascript independiente.Si solo quieres usar Sigma.js en una directiva, solo tienes que agregarlo a tu index.html