Angularjs中的Sigma.js

Question

我在角指令中使用Sigma.js有困难。

我正在采取的步骤是：

1. 我已经用约曼构建了我的应用程序。
2. 我已将西格玛安装为bower_component，并运行npm run build以获得小型化的sigma.min.js。
3. 我已经将它作为脚本添加到我的index.html中
4. 我在我的sigma中添加了app.js作为一个依赖项。
5. 我已经将它作为依赖项导入到我的指令中，作为sigma

我得到的错误是：module 'sigma' is not available

有人知道这是怎么回事吗？

这是代码: 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

注意事项：虽然应该可以工作，但它的实现非常慢(请参阅注释)

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

它的特点只有基本的(图，宽度，高度)，但可以很容易地扩展到您的需要。

这是裸露的指令。有关完整的示例，请参见gist。

(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及其插件集成到角中的指南，请参阅https://github.com/Linkurious/linkurious.js/wiki/How-to-integrate-with-Angular.js

该方法已在中成功地实现，并与数千个节点和边缘一起工作。

Answer 3

Sigma.js不是一个角度模块，所以您不能要求它。是一个独立的Javascript库。如果只想在指令中使用Sigma.js，只需将其添加到index.html中即可。