Satura rādītājs
Tieši šeit tika nosaukts šis spraudnis Spacetree gadā izstrādāts Javascript kas ļauj mums dinamiskā un intuitīvā veidā parādīt informāciju koka veidā no organizatoriskām struktūrām vai informācijas katalogiem Spacetree tas notiek.
- 1- Vispirms mēs izveidojam savu JSON, tas ir tas, kurš saturēs visus mūsu kokā redzamos datus, mums jābūt uzmanīgiem, lai izveidotu pareizu struktūru un uzturētu tēva un dēla attiecības mūsu JSON.
id: "node02",
nosaukums: "0.2",
dati: {},
bērni: [{
id: "node13",
nosaukums: "1.3",
dati: {},….
- 2 - Mēs izveidojam komponenta instanci Spacetree un mēs to saistām ar atlasītāju, šajā gadījumā elementa ID:
var st = jauns $ jit.ST ({
injicēt: “infovis”,…
- 3 - Mēs pievienojam dažas papildu iespējas, piemēram, animācijas ilgumu un attālumu starp katru vecāku mezglu un tā bērnu:
ilgums: 800,
pāreja: $ jit.Trans.Quart.easeInOut,
līmenis Attālums: 50,
- 4 - Tad mēs iestatām stilu mezgliem un asīm; augstums, garums, krāsa un formas veids, kas var atšķirties no taisnstūra līdz apļveida, ir svarīgi pieminēt, ka katram mezglam ir jābūt individuālam stilam pārvarējams jābūt vērtībai taisnība:
Nedod: {
augstums: 20,
platums: 60,
tips: "taisnstūris",
krāsa: '#aaa',
pārspīlēts: taisnība
},
Edge: {
tips: "bezier",
pārspīlēts: taisnība
},
- 5 - Ar metodi onCreateLabel Mēs piešķiram visus sava koka notikumus un apstrādātājus, kā arī varam piešķirt stilus etiķetēm katrā mezglā:
onCreateLabel: funkcija (etiķete, mezgls) {
label.id = mezgls.id;
label.innerHTML = mezgls.nosaukums;
label.onclick = function () {
if (normal.checked) {
st.onclick (node.id);
} vēl {
st.setRoot (node.id, 'animēt');
}
};
var stils = etiķete.stils;
style.width = 60 + 'px';
style.height = 17 + 'px';
style.cursor = 'rādītājs';
style.color = '# 333';
style.fontSize = '0.8em';
style.textAlign = 'centrs';
style.paddingTop = '3px';
},
- 6 - Ar metodi onBeforePlotNode mezgla īpašības tiek izmainītas pirms zīmēšanas, piemēram, mainot mezgla krāsu atkarībā no tā stāvokļa vai bērnu skaita.
onBeforePlotNode: funkcija (mezgls) {
ja (node.selected) {
mezgls.dati. $ color = "# ff7";
}
cits {
$ color dzēst node.data. $ color;
ja (! mezgls.anySubnode ("pastāv")) {
var skaits = 0;
node.eachSubnode (funkcija (n) {skaits ++;});
mezgls.dati. $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [skaits];
}
}
},
- 7 - Ar metodi onBeforePlotLine pirms zīmēšanas tiek mainītas asu īpašības:
onBeforePlotLine: function (adj) {
ja (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data. $ color = "#eed";
adj.data. $ lineWidth = 3;
}
cits {
dzēst adj.data. $ color;
dzēst adj.data. $ lineWidth;
}
}
});
- 8 - Visbeidzot, mēs ielādējam JSON datus:
Gala rezultāts būtu šāds:
var st = jauns $ jit.ST ({injectInto: 'infovis', ilgums: 800, pāreja: $ jit.Trans.Quart.easeInOut, levelDistance: 50, Navigation: {enable: true, panning: true}, Node: { augstums: 20, platums: 60, tips: 'taisnstūris', krāsa: '#aaa', ignorējams: true}, mala: {tips: 'bezier', ignorējams: true}, onBeforeCompute: funkcija (mezgls) {Log.write ("iekraušana" + mezgls.nosaukums);}, onAfterCompute: function () {Log.write ("done");}, onCreateLabel: funkcija (etiķete, mezgls) {label.id = node.id; label.innerHTML = mezgls.nosaukums; label.onclick = funkcija () {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 = 'rādītājs'; style.color = '# 333'; style.fontSize = '0.8em'; style.textAlign = 'center'; style.paddingTop = '3px';}, onBeforePlotNode: function (node) {if (node.selected) {node.data. $ color = "# ff7";} else {delete mezgls. dati. $ krāsa; if (! node.anySubnode ("eksistē")) {var count = 0; node.eachSubn oda (funkcija (n) {skaits ++; }); mezgls.dati. $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [skaits]; }}}, onBeforePlotLine: function (adj) {if (adj.nodeFrom.selected && adj.nodeTo.selected) {adj.data. $ color = "#eed"; adj.data. $ lineWidth = 3; } cits {dzēst adj.data. $ color; dzēst adj.data. $ lineWidth; }}}); st.loadJSON (json); st.compute (); st.geom.translate (jauns $ jit.Complex (-200, 0), "pašreizējais"); st.onclick (st.akne); Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu 
