Sigma.js en Angularjs

Question

J'ai de la difficulté à l'aide de Sigma.js à l'intérieur d'un Angulaire de la directive.

Les mesures que je prends sont:

1. J'ai construit mon application avec yeoman.
2. J'ai installé sigma comme un bower_component et a couru npm run build à obtenu le minifiés sigma.min.js
3. J'ai ajouté un script dans mon index.html
4. J'ai ajouté sigma en tant que dépendance dans mon app.js.
5. J'ai importé en tant que dépendance dans mon directive sigma

L'erreur que je reçois est: module 'sigma' is not available

Quelqu'un a une idée sur ce qui se passe?

C'est le code: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'
                }
            });


        }


    };


}]);

Answer 1

Méfiez-vous: bien que cela devrait fonctionner, c'est un très lente mise en œuvre (voir les commentaires)

Pour référence future, j'ai fait un simple Sigma.Js (v. 1.0.3) la Directive pour AngularJs (1.2.25).Il peut être trouvé dans ce résumé: Simple Sigma.Js AngularJs Directive

Il ne comporte que les notions de base (graphique, largeur, hauteur), mais peut facilement être étendue à vos besoins.

Ici, le nu de la directive.Voir le résumé de exemple complet.

(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

Je suis en train d'écrire un guide pour intégrer les Sigma et ses plugins dans Angulaire, voir https://github.com/Linkurious/linkurious.js/wiki/How-to-integrate-with-Angular.js

Cette approche a été appliquée avec succès dans Linkurious de l'Entreprise et travaille avec des milliers de nœuds et d'arêtes.

Answer 3

Sigma.js n'est pas un module angulaire, de sorte que vous ne peut pas l'exiger.C'est un standlone bibliothèque Javascript.Si vous souhaitez les utiliser Sigma.js dans une directive, vous n'avez qu'à l'ajouter à vos index.html

Answer 4

Essayez ceci:

bower install sigma.js

Mais regardez ici avant: https://github.com/tuvistavie/sigma-bower