Sigma.js em Angularjs

Question

Estou tendo problemas para usar o Sigma.js dentro de uma diretiva Angular.

Os passos que estou tomando são:

1. Eu construí meu aplicativo com yeoman.
2. Eu instalei o sigma como um bower_component e executei npm run build para obter o minificado sigma.min.js
3. Eu adicionei isso como um script no meu index.html
4. Eu adicionei sigma como uma dependência na minha app.js.
5. Eu importei isso como uma dependência na minha diretiva como sigma

O erro que estou recebendo é: module 'sigma' is not available

Alguém tem uma ideia do que está acontecendo?

Este é o código:aplicativo.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

Cuidado: embora isso deva funcionar, é uma implementação muito lenta (ver comentários)

Para referência futura, fiz uma diretiva Sigma.Js (v.1.0.3) simples para AngularJs (1.2.25).Pode ser encontrado nesta essência: Diretiva Simples Sigma.Js AngularJs

Ele apresenta apenas o básico (gráfico, largura, altura), mas pode ser facilmente estendido de acordo com suas necessidades.

Aqui está a diretiva nua e crua.Veja a essência para um exemplo 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

Estou escrevendo um guia para integrar o Sigma e seus plugins ao Angular, veja https://github.com/Linkurious/linkurious.js/wiki/How-to-integrate-with-Angular.js

Esta abordagem foi implementada com sucesso no Linkurious Enterprise e funciona com milhares de nós e arestas.

Answer 3

Sigma.js não é um módulo angular, portanto você não pode exigi-lo.É uma biblioteca Javascript independente.Se você quiser apenas usar Sigma.js em uma diretiva, basta adicioná-lo ao seu index.html

Answer 4

Experimente isto:

bower install sigma.js

Mas olhe aqui antes: https://github.com/tuvistavie/sigma-bower