Sigma.js in Angularjs

Question

Ich habe Probleme bei der Verwendung von Sigma.js innerhalb einer Angular-Direktive.

Die Schritte, die ich unternehme, sind:

1. Ich habe meine App mit Yeoman erstellt.
2. Ich habe Sigma als Bower_Component installiert und ausgeführt npm run build um das Minimierte zu erhalten sigma.min.js
3. Ich habe es als Skript in meinem hinzugefügt index.html
4. Ich habe hinzugefügt sigma als Abhängigkeit in meinem app.js.
5. Ich habe es als Abhängigkeit in meine Direktive importiert sigma

Der Fehler, den ich erhalte, ist: module 'sigma' is not available

Hat jemand eine Idee, was los ist?

Das ist der 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

In acht nehmen: Obwohl dies funktionieren sollte, handelt es sich um eine sehr langsame Implementierung (siehe Kommentare).

Zur späteren Bezugnahme habe ich eine einfache Sigma.Js (v.1.0.3)-Direktive für AngularJs (1.2.25) erstellt.Es ist in diesem Kern zu finden: Einfache Sigma.Js AngularJs-Direktive

Es verfügt nur über die Grundlagen (Grafik, Breite, Höhe), kann aber problemlos an Ihre Bedürfnisse angepasst werden.

Hier ist die nackte Richtlinie.Das vollständige Beispiel finden Sie im Kern.

(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

Ich schreibe eine Anleitung zur Integration von Sigma und seinen Plugins in Angular, siehe https://github.com/Linkurious/linkurious.js/wiki/How-to-integrate-with-Angular.js

Dieser Ansatz wurde erfolgreich in Linkurious Enterprise implementiert und funktioniert mit Tausenden von Knoten und Kanten.

Answer 3

Sigma.js ist kein Angular-Modul und kann daher nicht benötigt werden.Es handelt sich um eine eigenständige Javascript-Bibliothek.Wenn Sie Sigma.js nur in einer Direktive verwenden möchten, müssen Sie es nur zu Ihrer index.html hinzufügen

Answer 4

Versuche dies:

bower install sigma.js

Aber schauen Sie vorher hier: https://github.com/tuvistavie/sigma-bower