„Spacetree“ su „JavaScript“

Būtent čia ir vadinamas šis papildinys „Spacetree“ sukurta m Javascript leidžia mums dinamiškai ir intuityviai rodyti informaciją medžio pavidalu iš organizacinių struktūrų ar informacijos katalogų „Spacetree“ ji.

• 1- Pirmiausia sukuriame savo JSONAS, tai yra tas, kuris turės visus duomenis, kurie bus rodomi mūsų medyje, turime būti atsargūs, kad nustatytume teisingą struktūrą ir išlaikytume tėvo ir sūnaus santykius mūsų JSONAS.

var json = {
id: "node02",
pavadinimas: "0.2",
duomenys: {},
vaikai: [{
id: "node13",
pavadinimas: "1.3",
duomenys: {},….

• 2 - Mes sukuriame komponento egzempliorių „Spacetree“ ir mes susiejame jį su parinkikliu, šiuo atveju elemento ID:

var st = naujas $ jit.ST ({
švirkšti į: „infovis“,…

• 3 - Pridedame keletą papildomų parinkčių, tokių kaip animacijos trukmė ir atstumas tarp kiekvieno pagrindinio mazgo ir jo antrinio elemento:

trukmė: 800,
perėjimas: $ jit.Trans.Quart.easeInOut,
lygisAtstumas: 50,

• 4 - Tada mes nustatome mazgų ir ašių stilių; aukštis, ilgis, spalva ir formos tipas, kuris gali skirtis nuo stačiakampio iki apskrito, svarbu paminėti, kad kiekvienam mazgui turi būti suteiktas individualus stilius įveikiamas turi turėti vertę tiesa:

Neduok: {
aukštis: 20,
plotis: 60,
tipas: „stačiakampis“,
spalva: '#aaa',
nepaisoma: tiesa
},

Briauna: {
tipas: „bezier“,
nepaisoma: tiesa
},

• 5 - Su metodu onCreateLabel Mes priskiriame visus savo medžio įvykius ir tvarkytojus, taip pat galime priskirti stilius kiekvieno mazgo etiketėms:

onCreateLabel: funkcija (etiketė, mazgas) {
label.id = mazgas.id;
label.innerHTML = mazgas.pavadinimas;
label.onclick = function () {
jei (normal.checked) {
st.onclick (node.id);
} Kitas {
st.setRoot (node.id, 'animate');
}
};
var stilius = label.style;
style.width = 60 + 'px';
style.height = 17 + 'px';
style.cursor = 'rodyklė';
style.color = '# 333';
style.fontSize = '0.8em';
style.textAlign = 'centras';
style.paddingTop = '3px';
},

• 6 - Su metodu onBeforePlotNode mazgo savybės keičiamos prieš piešiant, pavyzdžiui, keičiama mazgo spalva, atsižvelgiant į jo padėtį ar vaikų skaičių.

onBeforePlotNode: funkcija (mazgas) {

if (node.selected) {

node.data. $ color = "# ff7";

}

Kitas {

$ color; ištrinti node.data.

if (! node.anySubnode ("egzistuoja")) {

var skaičius = 0;

node.eachSubnode (funkcija (n) {count ++;});

node.data. $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [skaičius];

}

}

},

• 7 - Su metodu onBeforePlotLine prieš piešiant keičiamos ašių savybės:

onBeforePlotLine: function (adj) {
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data. $ color = "#eed";
$ lineWidth = 3;
}
Kitas {
ištrinti adj.data. $ color;
ištrinti adj.data. $ lineWidth;
}
}
});

• 8 - Galiausiai įkeliame JSON duomenis:

st.loadJSON (json);
Galutinis rezultatas būtų toks:

Čia yra visas šaltinio kodas, kurį galite išbandyti patys:

 var st = naujas $ jit.ST ({injectInto: 'infovis', trukmė: 800, perėjimas: $ jit.Trans.Quart.easeInOut, levelDistance: 50, Navigation: {enable: true, panning: true}, Node: { aukštis: 20, plotis: 60, tipas: „stačiakampis“, spalva: „#aaa“, nepaisoma: tiesa}, kraštas: {tipas: „bezier“, nepaisomas: tiesa}, onBeforeCompute: funkcija (mazgas) {Log.write ("įkėlimas" + mazgas.pavadinimas);}, onAfterCompute: function () {Log.write ("done");}, onCreateLabel: funkcija (etiketė, mazgas) {label.id = node.id; label.innerHTML = node.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 = 'rodyklė'; style.color = '# 333'; style.fontSize = '0.8em'; style.textAlign = 'center'; style.paddingTop = '3px';}, onBeforePlotNode: funkcija (mazgas) {if (node.selected) {node.data. $ color = "# ff7";} else {delete mazgas. duomenys. $ spalva; if (! node.anySubnode ("egzistuoja")) {var count = 0; node.eachSubn odė (funkcija (n) {skaičius ++; }); node.data. $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [skaičius]; }}}, onBeforePlotLine: function (adj) {if (adj.nodeFrom.selected && adj.nodeTo.selected) {adj.data. $ color = "#eed"; $ lineWidth = 3; } else {ištrinti adj.data. $ color; ištrinti adj.data. $ lineWidth; }}}); st.loadJSON (json); st.compute (); st.geom.translate (naujas $ jit.Complex (-200, 0), "dabartinis"); st.onclick (st.root); 

Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką