Sigma.js in Angularjs.

Question

Ho problemi a usare Sigma.js all'interno di una direttiva angolare.

I passaggi che sto prendendo sono:

.
1. Ho costruito la mia app con Yeoman.
2. Ho installato Sigma come BOWER_COMPONENT e ha eseguito npm run build per ottenere il sigma.min.js Minified
3. L'ho aggiunto come script nel mio index.html
4. Ho aggiunto sigma come dipendenza dal mio app.js.
5. L'ho importato come dipendenza dalla mia direttiva come sigma

L'errore che sto ricevendo è: module 'sigma' is not available

Qualcuno ha un'idea su cosa sta succedendo?

Questo è il codice: 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: '/'
      });
  });

.

sigmail.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

Attenzione: Anche se questo dovrebbe funzionare, è un'implementazione molto lenta (vedi commenti)

Per riferimento futuro, ho fatto una semplice direttiva Sigma.js (V.1.0.3) per AngularJS (1.2.25).Si può trovare in questo GIST: Simple Sigma.js Angularjs Direttiva

Caratterà solo le basi (grafico, larghezza, altezza) ma può essere facilmente estesa alle tue esigenze.

Ecco la direttiva nuda.Vedi GIST per intero esempio.

(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

Sto scrivendo una guida per integrare Sigma e i suoi plugin in angolari, vedere https://github.com/lininkurious/lininkruous.js/wiki/how-to-integrate-with-angular.js

Questo approccio è stato implementato con successo in Enterprise collegate e funziona con migliaia di nodi e bordi.

Answer 3

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

Answer 4

Try this:

bower install sigma.js

But look here before: https://github.com/tuvistavie/sigma-bower