Cuprins
Aici a apelat acest plugin Spacetree dezvoltat în Javascript care ne permite să afișăm informațiile sub forma unui copac, într-un mod dinamic și intuitiv, din structuri organizaționale sau directoare de informații Spacetree da.
- 1- Mai întâi ne creăm JSON, este cel care va conține toate datele de afișat în arborele nostru, trebuie să fim atenți să stabilim structura corectă și să menținem relația tatălui și fiului în JSON.
id: „nod02”,
nume: "0,2",
date: {},
copii: [{
id: „nodul13”,
nume: "1.3",
date: {},… .
- 2 - Creăm instanța componentei Spacetree și îl asociem la un selector în acest caz id-ul unui element:
var st = new $ jit.ST ({
injectInto: 'infovis', …
- 3 - Adăugăm câteva opțiuni suplimentare, cum ar fi durata animației și distanța dintre fiecare nod părinte și copilul său:
durata: 800,
tranziție: $ jit.Trans.Quart.easeInOut,
levelDistance: 50,
- 4 - Apoi stabilim stilul pentru noduri și axe; înălțimea, lungimea, culoarea și tipul de formă care pot varia de la dreptunghiular la circular, este important să menționăm că pentru fiecare nod să aibă un stil individual opțiunea suprasolicitabil trebuie să aibă valoarea Adevărat:
Nu da: {
înălțime: 20,
lățime: 60,
tastați: „dreptunghi”,
culoare: „#aaa”,
suprasolicitabil: adevărat
},
Margine: {
tip: „bezier”,
suprasolicitabil: adevărat
},
- 5 - Cu metoda onCreateLabel Atribuim toate evenimentele și gestionarele arborelui nostru, precum și putem atribui stiluri etichetelor din fiecare nod:
onCreateLabel: funcție (etichetă, nod) {
label.id = nod.id;
label.innerHTML = node.name;
label.onclick = function () {
dacă (normal.verificat) {
st.onclick (node.id);
} altceva {
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 = 'centru';
style.paddingTop = '3px';
},
- 6 - Cu metoda onBeforePlotNode proprietățile unui nod sunt modificate înainte de a fi desenate, cum ar fi schimbarea culorii unui nod în funcție de poziția acestuia sau de câți copii are.
onBeforePlotNode: funcție (nod) {
if (nod.selected) {
node.data. $ color = "# ff7";
}
altceva {
ștergeți node.data. $ color;
if (! node.anySubnode ("există")) {
număr de var = 0;
node.eachSubnode (function (n) {count ++;});
node.data. $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [count];
}
}
},
- 7 - Cu metoda onBeforePlotLine proprietățile axelor sunt modificate înainte de a fi trasate:
onBeforePlotLine: function (adj) {
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data. $ color = "#eed";
date adj. $ lineWidth = 3;
}
altceva {
șterge date adj. $ color;
ștergeți datele adj. $ lineWidth;
}
}
});
- 8 - În cele din urmă, încărcăm datele JSON:
Rezultatul final ar fi următorul:
var st = new $ jit.ST ({injectInto: 'infovis', durata: 800, tranziție: $ jit.Trans.Quart.easeInOut, levelDistance: 50, Navigare: {enable: true, panning: true}, Nod: { înălțime: 20, lățime: 60, tip: „dreptunghi”, culoare: „#aaa”, suprascriptibil: adevărat}, margine: {tip: „bezier”, suprascriptibil: adevărat}, onBeforeCompute: funcție (nod) {Log.write ("încărcare" + node.name);}, onAfterCompute: funcție () {Log.write ("făcut");}, onCreateLabel: funcție (etichetă, nod) {label.id = node.id; label.innerHTML = name.name; label.onclick = function () {if (normal.checked) {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 = 'center'; style.paddingTop = '3px';}, onBeforePlotNode: funcție (nod) {if (node.selected) {node.data. $ color = "# ff7";} else {șterge nodul. date. $ color; if (! node.anySubnode ("există")) {var count = 0; node.eachSubn oda (funcție (n) {count ++; }); node.data. $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [count]; }}}, onBeforePlotLine: function (adj) {if (adj.nodeFrom.selected && adj.nodeTo.selected) {adj.data. $ color = "#eed"; date adj. $ lineWidth = 3; } else {delete adj.data. $ color; ștergeți datele adj. $ lineWidth; }}}); st.loadJSON (json); st.compute (); st.geom.translate (new $ jit.Complex (-200, 0), "current"); st.onclick (st.root); V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv
