Съдържание
Тук се нарича този плъгин Космическо дърво разработен през Javascript което ни позволява да показваме информацията под формата на дърво по динамичен и интуитивен начин от организационни структури или информационни директории Космическо дърво прави.
- 1- Първо създаваме нашите JSON, това е този, който ще съдържа всички данни за показване в нашето дърво, трябва да внимаваме да установим правилната структура и да поддържаме връзката на баща и син в нашия JSON.
id: "node02",
име: "0.2",
данни: {},
деца: [{
id: "node13",
име: "1.3",
данни: {},… .
- 2 - Ние създаваме екземпляра на компонента Космическо дърво и го свързваме със селектор, в този случай идентификатора на елемент:
var st = нов $ jit.ST ({
injectInto: 'infovis',…
- 3 - Добавяме някои допълнителни опции, като например продължителността на анимацията и разстоянието между всеки родителски възел и неговото дете:
продължителност: 800,
преход: $ jit.Trans.Quart.easeInOut,
ниво Разстояние: 50,
- 4 - След това задаваме стила за възлите и осите; височина, дължина, цвят и тип форма, които могат да варират от правоъгълна до кръгла, важно е да се спомене, че за всеки възел да има индивидуален стил опцията заменяема трябва да има стойността вярно:
Не давай: {
височина: 20,
ширина: 60,
тип: „правоъгълник“,
цвят: '#aaa',
overridable: true
},
Ръб, край: {
тип: „bezier“,
overridable: true
},
- 5 - С метода onCreateLabel Ние присвояваме всички събития и манипулатори на нашето дърво, както и възможността да присвояваме стилове на етикетите във всеки възел:
onCreateLabel: функция (етикет, възел) {
label.id = node.id;
label.innerHTML = node.name;
label.onclick = function () {
if (нормално. проверено) {
st.onclick (node.id);
} else {
st.setRoot (node.id, 'animate');
}
};
var style = label.style;
style.width = 60 + 'px';
style.height = 17 + 'px';
style.cursor = 'pointer';
style.color = '# 333';
style.fontSize = '0.8em';
style.textAlign = 'център';
style.paddingTop = '3px';
},
- 6 - С метода onBeforePlotNode свойствата на възел се променят, преди да бъдат нарисувани, като например промяна на цвета на възел в зависимост от позицията му или колко деца има.
onBeforePlotNode: function (node) {
if (node.selected) {
node.data. $ color = "# ff7";
}
иначе {
изтрийте node.data. $ color;
if (! node.anySubnode ("съществуват")) {
var count = 0;
node.eachSubnode (function (n) {count ++;});
node.data. $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [брой];
}
}
},
- 7 - С метода onBeforePlotLine свойствата на осите се променят, преди да бъдат начертани:
onBeforePlotLine: function (adj) {
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data. $ color = "#eed";
adj.data. $ lineWidth = 3;
}
иначе {
изтриване на adj.data. $ color;
изтриване на adj.data. $ lineWidth;
}
}
});
- 8 - Накрая зареждаме JSON данните:
Крайният резултат ще бъде следният:
var st = нов $ jit.ST ({injectInto: 'infovis', продължителност: 800, преход: $ jit.Trans.Quart.easeInOut, levelDistance: 50, Навигация: {enable: true, panning: true}, Node: { височина: 20, ширина: 60, тип: 'правоъгълник', цвят: '#aaa', заменяем: true}, ръб: {тип: 'bezier', заменяем: true}, onBeforeCompute: функция (възел) {Log.write ("зареждане" + node.name);}, onAfterCompute: function () {Log.write ("направено");}, onCreateLabel: функция (етикет, възел) {label.id = node.id; label.innerHTML = възел.име; label.style; style.width = 60 + 'px'; style.height = 17 + 'px'; style.cursor = 'pointer'; style.color = '# 333'; style.fontSize = '0.8em'; style.textAlign = 'center'; style.paddingTop = '3px';}, onBeforePlotNode: function (node) {if (node.selected) {node.data. $ color = "# ff7";} else {изтриване на възел. данни. $ color; if (! node.anySubnode ("съществуват")) {var count = 0; node.eachSubn ode (function (n) {count ++; }); node.data. $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [брой]; }}}, onBeforePlotLine: function (adj) {if (adj.nodeFrom.selected && adj.nodeTo.selected) {adj.data. $ color = "#eed"; adj.data. $ lineWidth = 3; } else {изтриване на adj.data. $ color; изтриване на adj.data. $ lineWidth; }}}); st.loadJSON (json); st.compute (); st.geom.translate (нов $ jit.Complex (-200, 0), "текущ"); st.onclick (st.root); Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка
