Sigma.js в Angularjs

Question

У меня возникли проблемы с использованием Sigma.js внутри директивы Angular.

Шаги, которые я предпринимаю:

1. Я создал свое приложение с помощью yeoman.
2. Я установил Sigma в качестве компонента Bower_Component и запустил npm run build чтобы получить минимизированный sigma.min.js
3. Я добавил его как скрипт в свой index.html
4. я добавил sigma как зависимость в моем app.js.
5. Я импортировал его как зависимость в своей директиве как sigma

Ошибка, которую я получаю: module 'sigma' is not available

Есть ли у кого-нибудь представление о том, что происходит?

Это код:приложение.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: '/'
      });
  });

сигмаграф.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

Остерегаться: хотя это должно работать, это очень медленная реализация (см. комментарии)

На будущее я создал простую директиву Sigma.Js (v.1.0.3) для AngularJs (1.2.25).Его можно найти в этой сути: Простая директива AngularJs для Sigma.Js

В нем представлены только основные функции (график, ширина, высота), но его можно легко расширить в соответствии с вашими потребностями.

Вот голая директива.Полный пример см. в сути.

(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

Я пишу руководство по интеграции Sigma и ее плагинов в Angular, см. https://github.com/Linkurious/linkurious.js/wiki/How-to-integrate-with-Angular.js

Этот подход был успешно реализован в Linkurious Enterprise и работает с тысячами узлов и ребер.

Answer 3

Sigma.js не является модулем Angular, поэтому вы не можете его требовать.Это автономная библиотека Javascript.Если вы просто хотите использовать Sigma.js в директиве, вам нужно всего лишь добавить его в свой index.html.

Answer 4

Попробуй это:

bower install sigma.js

Но прежде посмотрите здесь: https://github.com/tuvistavie/sigma-bower