Sigma.js en Angularjs

Question

Tengo problemas para usar Sigma.js dentro de una directiva Angular.

Los pasos que estoy tomando son:

1. He creado mi aplicación con yeoman.
2. Instalé sigma como bower_component y ejecuté npm run build para obtener el minified sigma.min.js
3. Lo he agregado como un script en mi index.html
4. Yo he añadido sigma como una dependencia en mi app.js.
5. 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'
                }
            });


        }


    };


}]);

Answer 1

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();
                });
            }
        };
    });
})();

Answer 2

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.

Answer 3

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

Answer 4

Prueba esto:

bower install sigma.js

Pero mira aquí antes: https://github.com/tuvistavie/sigma-bower