Sigma.js في Angularjs
-
21-12-2019 - |
سؤال
أواجه مشكلة في استخدام Sigma.js داخل التوجيه Angular.
الخطوات التي أقوم بها هي:
- لقد قمت ببناء تطبيقي مع yeoman.
- لقد قمت بتثبيت سيجما كمكون Bower_component وتم تشغيله
npm run build
للحصول على المصغرsigma.min.js
- لقد أضفته كبرنامج نصي في ملفي
index.html
- لقد أضفت
sigma
باعتبارها تبعية في بلديapp.js
. - لقد قمت باستيراده باعتباره تبعية في توجيهاتي كـ
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'
}
});
}
};
}]);
المحلول
احذر: على الرغم من أن هذا يجب أن ينجح، إلا أنه بطيء جدًا (انظر التعليقات)
للرجوع إليها مستقبلاً، قمت بإعداد توجيه 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();
});
}
};
});
})();
نصائح أخرى
أنا أكتب دليلاً لدمج Sigma ومكوناته الإضافية في Angular، انظر https://github.com/Linkurious/linkurious.js/wiki/How-to-integrate-with-Angular.js
تم تنفيذ هذا النهج بنجاح في Linkurious Enterprise ويعمل مع آلاف العقد والحواف.
Sigma.js ليس وحدة زاوية، لذا لا يمكنك طلبها.إنها مكتبة جافا سكريبت المستقلة.إذا كنت تريد فقط استخدام Sigma.js في التوجيه، فما عليك سوى إضافته إلى ملف Index.html الخاص بك