Angularjs 中的 Sigma.js

Question

我在 Angular 指令中使用 Sigma.js 时遇到问题。

我正在采取的步骤是：

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: '/'
      });
  });

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

谨防： 虽然这应该可行，但实现速度非常慢（请参阅评论）

为了将来参考，我为 AngularJs (1.2.25) 制作了一个简单的 Sigma.Js (v.1.0.3) 指令。可以在这个要点中找到： 简单的 Sigma.Js AngularJs 指令

它仅具有基础功能（图形、宽度、高度），但可以轻松扩展以满足您的需求。

这是赤裸裸的指令。完整示例请参阅要点。

(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