Преглед садржаја
Овде се овај додатак зове Спацетрее развијен у Јавасцрипт што нам омогућава да прикажемо информације у облику стабла, на динамичан и интуитиван начин, из организационих структура или именика информација Спацетрее то јесте.
- 1- Прво креирамо своје ЈСОН, то је онај који ће садржати све податке за приказ на нашем стаблу, морамо бити опрезни да успоставимо исправну структуру и одржавамо однос оца и сина у нашем ЈСОН.
ид: "ноде02",
име: "0,2",
подаци: {},
деца: [{
ид: "ноде13",
име: "1.3",
подаци: {},….
- 2 - Креирамо инстанцу компоненте Спацетрее и ми га повезујемо са селектором у овом случају ид елемента:
вар ст = нев $ јит.СТ ({
ињецтИнто: 'инфовис',…
- 3 - Додајемо неке додатне опције, као што су трајање анимације и удаљеност између сваког родитељског чвора и његовог детета:
трајање: 800,
прелаз: $ јит.Транс.Куарт.еасеИнОут,
левелДистанце: 50,
- 4 - Затим смо поставили стил за чворове и осе; висина, дужина, боја и тип облика који могу варирати од правоугаоног до кружног, важно је напоменути да за сваки чвор постоји индивидуални стил надјачати мора имати вредност истина:
Не дају: {
висина: 20,
ширина: 60,
тип: „правоугаоник“,
боја: '#ааа',
оверридабле: труе
},
Ивица: {
тип: „безиер“,
оверридабле: труе
},
- 5 - Са методом онЦреатеЛабел Додељујемо све догађаје и руковаоце нашем стаблу, као и могућност додељивања стилова ознакама у сваком чвору:
онЦреатеЛабел: фунцтион (лабел, ноде) {
лабел.ид = ноде.ид;
лабел.иннерХТМЛ = ноде.наме;
лабел.онцлицк = фунцтион () {
иф (нормално.проверено) {
ст.онцлицк (ноде.ид);
} елсе {
ст.сетРоот (ноде.ид, 'анимирај');
}
};
вар стиле = лабел.стиле;
стиле.видтх = 60 + 'пк';
стиле.хеигхт = 17 + 'пк';
стиле.цурсор = 'показивач';
стиле.цолор = '# 333';
стиле.фонтСизе = '0.8ем';
стиле.тектАлигн = 'центар';
стиле.паддингТоп = '3пк';
},
- 6 - Са методом онБефореПлотНоде својства чвора се мењају пре цртања, као што је промена боје чвора у зависности од његовог положаја или броја деце која има.
онБефореПлотНоде: фунцтион (ноде) {
иф (ноде.селецтед) {
ноде.дата. $ цолор = "# фф7";
}
елсе {
обришите ноде.дата. $ цолор;
иф (! ноде.аниСубноде ("постоје")) {
вар цоунт = 0;
ноде.еацхСубноде (фунцтион (н) {цоунт ++;});
ноде.дата. $ цолор = ['#ааа', '#баа', '#цаа', '#даа', '#еаа', '#фаа'] [број];
}
}
},
- 7 - Са методом онБефореПлотЛине својства оса се мењају пре цртања:
онБефореПлотЛине: фунцтион (адј) {
иф (адј.нодеФром.селецтед && адј.нодеТо.селецтед) {
адј.дата. $ цолор = "#еед";
адј.дата. $ линеВидтх = 3;
}
елсе {
брисање адј.дата. $ цолор;
брисање адј.дата. $ линеВидтх;
}
}
});
- 8 - На крају учитавамо ЈСОН податке:
Коначни резултат би био следећи:
вар ст = нови $ јит.СТ ({ињецтИнто: 'инфовис', трајање: 800, прелаз: $ јит.Транс.Куарт.еасеИнОут, левелДистанце: 50, Навигација: {енабле: труе, паннинг: труе}, Чвор: { висина: 20, ширина: 60, тип: 'правокутник', боја: '#ааа', надјачљиво: труе}, Ивица: {тип: 'безиер', надјачљиво: труе}, онБефореЦомпуте: функција (чвор) {Лог.врите ("учитавање" + име чвора);}, онАфтерЦомпуте: фунцтион () {Лог.врите ("готово");}, онЦреатеЛабел: функција (ознака, чвор) {лабел.ид = ноде.ид; лабел.иннерХТМЛ = ноде.наме; лабел.онцлицк = фунцтион () {иф (нормал. цхецкед) {ст.онцлицк (ноде.ид);} елсе {ст.сетРоот (ноде.ид, 'анимате');}}; вар стиле = лабел.стиле; стиле.видтх = 60 + 'пк'; стиле.хеигхт = 17 + 'пк'; стиле.цурсор = 'поинтер'; стиле.цолор = '# 333'; стиле.фонтСизе = '0.8ем'; стиле.тектАлигн = 'центер'; стиле.паддингТоп = '3пк';}, онБефореПлотНоде: фунцтион (ноде) {иф (ноде.селецтед) {ноде.дата. $ цолор = "# фф7";} елсе {делете ноде. подаци. $ цолор; иф (! ноде.аниСубноде ("постоје")) {вар цоунт = 0; ноде.еацхСубн оде (фунцтион (н) {цоунт ++; }); ноде.дата. $ цолор = ['#ааа', '#баа', '#цаа', '#даа', '#еаа', '#фаа'] [број]; }}}, онБефореПлотЛине: фунцтион (адј) {иф (адј.нодеФром.селецтед && адј.нодеТо.селецтед) {адј.дата. $ цолор = "#еед"; адј.дата. $ линеВидтх = 3; } елсе {делете адј.дата. $ цолор; брисање адј.дата. $ линеВидтх; }}}); ст.лоадЈСОН (јсон); ст.цомпуте (); ст.геом.транслате (нев $ јит.Цомплек (-200, 0), "цуррент"); ст.онцлицк (ст.роот); Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен 
