Sigma.js في Angularjs

Question

أواجه مشكلة في استخدام Sigma.js داخل التوجيه Angular.

الخطوات التي أقوم بها هي:

1. لقد قمت ببناء تطبيقي مع yeoman.
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

احذر: على الرغم من أن هذا يجب أن ينجح، إلا أنه بطيء جدًا (انظر التعليقات)

للرجوع إليها مستقبلاً، قمت بإعداد توجيه Sigma.Js (v.1.0.3) بسيط لـ AngularJs (1.2.25).ويمكن العثور عليها في هذا الجوهر: توجيه 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 ليس وحدة زاوية، لذا لا يمكنك طلبها.إنها مكتبة جافا سكريبت المستقلة.إذا كنت تريد فقط استخدام Sigma.js في التوجيه، فما عليك سوى إضافته إلى ملف Index.html الخاص بك

Answer 4

جرب هذا:

bower install sigma.js

لكن انظر هنا قبل ذلك: https://github.com/tuvistavie/sigma-bower