Svemirsko stablo s JavaScriptom

Ovdje se ovaj dodatak zove Svemirsko stablo razvijen u Javascript koji nam omogućuje prikaz informacija u obliku stabla, na dinamičan i intuitivan način, iz organizacijskih struktura ili imenika informacija Svemirsko stablo to radi.

• 1- Prvo stvaramo svoje JSON, to je onaj koji će sadržavati sve podatke za prikaz na našem stablu, moramo biti oprezni u uspostavljanju ispravne strukture i održavanju odnosa oca i sina u našem JSON.

var json = {
id: "node02",
naziv: "0,2",
podaci: {},
djeca: [{
id: "čvor13",
naziv: "1.3",
podaci: {},….

• 2 - Kreiramo instancu komponente Svemirsko stablo i pridružujemo ga selektoru u ovom slučaju id elementa:

var st = novi $ jit.ST ({
injectInto: 'infovis',…

• 3 - Dodajemo neke dodatne opcije, kao što su trajanje animacije i udaljenost između svakog roditeljskog čvora i njegovog djeteta:

trajanje: 800,
prijelaz: $ jit.Trans.Quart.easeInOut,
levelDistance: 50,

• 4 - Zatim smo postavili stil za čvorove i osi; visina, duljina, boja i vrsta oblika koji mogu varirati od pravokutnog do kružnog, važno je napomenuti da za svaki čvor postoji individualni stil nadjačati mora imati vrijednost pravi:

Nemoj dati: {
visina: 20,
širina: 60,
tip: 'pravokutnik',
boja: '#aaa',
nadjačati: istina
},

Rub: {
vrsta: 'bezier',
nadjačati: istina
},

• 5 - S metodom onCreateLabel Dodjeljujemo sve događaje i rukovatelje našem stablu, kao i mogućnost dodjeljivanja stilova oznakama u svakom čvoru:

onCreateLabel: funkcija (oznaka, čvor) {
label.id = node.id;
label.innerHTML = node.name;
label.onclick = function () {
if (normalno.provjereno) {
st.onclick (node.id);
} drugo {
st.setRoot (node.id, 'animiraj');
}
};
var style = label.style;
style.width = 60 + 'px';
style.height = 17 + 'px';
style.cursor = 'pokazivač';
style.color = '# 333';
style.fontSize = '0.8em';
style.textAlign = 'centar';
style.paddingTop = '3px';
},

• 6 - S metodom onBeforePlotNode svojstva čvora se mijenjaju prije iscrtavanja, kao što je promjena boje čvora ovisno o položaju ili broju djece koje ima.

onBeforePlotNode: function (node) {

if (node.selected) {

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

}

drugo {

brisanje node.data. $ color;

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

var broj = 0;

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

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

}

}

},

• 7 - S metodom onBeforePlotLine svojstva osi se mijenjaju prije iscrtavanja:

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

• 8 - Na kraju učitavamo JSON podatke:

st.loadJSON (json);
Konačni rezultat bio bi sljedeći:

Evo potpunog izvornog koda koji možete sami isprobati:

 var st = novi $ jit.ST ({injectInto: 'infovis', trajanje: 800, prijelaz: $ jit.Trans.Quart.easeInOut, levelDistance: 50, Navigacija: {enable: true, panning: true}, Čvor: { visina: 20, širina: 60, tip: 'pravokutnik', boja: '#aaa', nadjačljivo: true}, Rub: {tip: 'bezier', nadjačljivo: true}, onBeforeCompute: funkcija (čvor) {Log.write ("učitavanje" + ime čvora);}, onAfterCompute: function () {Log.write ("gotovo");}, onCreateLabel: funkcija (oznaka, čvor) {label.id = node.id; label.innerHTML = node.name; label.onclick = function () {if (normal.provjereno) {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: function (node) {if (node.selected) {node.data. $ color = "# ff7";} else {delete node. podaci. $ color; if (! node.anySubnode ("postoje")) {var count = 0; node.eachSubn ode (function (n) {count ++; }); node.data. $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [broj]; }}}, onBeforePlotLine: function (adj) {if (adj.nodeFrom.selected && adj.nodeTo.selected) {adj.data. $ color = "#eed"; adj.data. $ lineWidth = 3; } else {delete adj.data. $ color; brisanje adj.data. $ lineWidth; }}}); st.loadJSON (json); st.compute (); st.geom.translate (new $ jit.Complex (-200, 0), "current"); st.onclick (st.root); 

Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod