angularjsのsigma.js

Question

角度指令の中のSigma.jsを使用して問題がある。

撮影しているステップ：

1. 私はヨーマンと一緒に私のアプリを建てました。
2. 私はsigmaを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（1.2.25）のための単純なsigma.js（v.1.0.3）指令を作りました。これはこのgistにあります：シンプルな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

シグマとそのプラグインを角度に統合するためのガイドを書いています。js "rel=" nofollow "> https://github.com/linkurious/linkurious.js/wiki/how-to- Integrate-with-with-angular.js

このアプローチは、連鎖企業で正常に実施され、何千ものノードとエッジで動作しています。

Answer 3

Sigma.js is not an angular module, so you cannot require it. It's a standlone Javascript library. If you just want to use Sigma.js in a directive, you only have to add it to your index.html

Answer 4

Try this:

bower install sigma.js

But look here before: https://github.com/tuvistavie/sigma-bower