Sommario
È qui che ha chiamato questo plugin albero spaziale sviluppato in Javascript che ci permette di visualizzare le informazioni sotto forma di albero, in modo dinamico e intuitivo, da strutture organizzative o directory informative albero spaziale lo fa.
- 1- Per prima cosa creiamo il nostro JSON, è colui che conterrà tutti i dati da visualizzare nel nostro albero, dobbiamo stare attenti a stabilire la corretta struttura e mantenere il rapporto di padre e figlio nel nostro JSON.
id: "nodo02",
nome: "0.2",
dati: {},
figli: [{
id: "nodo13",
nome: "1.3",
dati: {},… .
- 2 - Creiamo l'istanza del componente albero spaziale e lo associamo ad un selettore in questo caso l'id di un elemento:
var st = nuovo $ jit.ST ({
injectInto: 'infovis',…
- 3 - Aggiungiamo alcune opzioni aggiuntive come la durata dell'animazione e la distanza tra ciascun nodo padre e il suo figlio:
durata: 800,
transizione: $ jit.Trans.Quart.easeInOut,
livelloDistanza: 50,
- 4 - Quindi impostiamo lo stile per i nodi e gli assi; altezza, lunghezza, colore e tipo di forma che può variare da rettangolare a circolare, è importante ricordare che per ogni nodo avere uno stile individuale l'opzione sovrascrivibile deve avere il valore vero:
Non dare: {
altezza: 20,
larghezza: 60,
tipo: 'rettangolo',
colore: '#aaa',
sovrascrivibile: vero
},
Bordo: {
tipo: 'bezier',
sovrascrivibile: vero
},
- 5 - Con il metodo onCreateLabel Assegniamo tutti gli eventi e gestori del nostro albero, oltre a poter assegnare stili alle etichette in ogni nodo:
onCreateLabel: function (label, node) {
etichetta.id = nodo.id;
label.innerHTML = node.name;
label.onclick = function() {
if (normal.checked) {
st.onclick (node.id);
} altro {
st.setRoot (node.id, 'animato');
}
};
var stile = etichetta.stile;
stile.larghezza = 60 + 'px';
stile.altezza = 17 + 'px';
style.cursor = 'puntatore';
style.color = '# 333';
style.fontSize = '0.8em';
style.textAlign = 'centro';
style.paddingTop = '3px';
},
- 6 - Con il metodo suBeforePlotNode le proprietà di un nodo vengono modificate prima di essere disegnate, ad esempio cambiando il colore di un nodo a seconda della sua posizione o del numero di figli che ha.
onBeforePlotNode: function (nodo) {
if (nodo.selezionato) {
node.data.$ color = "# ff7";
}
altro {
cancella node.data $ color;
if (! node.anySubnode ("exist")) {
conteggio var = 0;
node.eachSubnode (funzione (n) {count ++;});
node.data $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [count];
}
}
},
- 7 - Con il metodo suBeforePlotLine le proprietà degli assi vengono modificate prima di essere disegnate:
onBeforePlotLine: function (adj) {
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data $ color = "#eed";
adj.data $ lineWidth = 3;
}
altro {
cancella adj.data $ color;
cancella adj.data $ lineWidth;
}
}
});
- 8 - Infine carichiamo i dati JSON:
Il risultato finale sarebbe il seguente:
var st = new $ jit.ST ({injectInto: 'infovis', durata: 800, transizione: $ jit.Trans.Quart.easeInOut, levelDistance: 50, Navigazione: {enable: true, panning: true}, Nodo: { altezza: 20, larghezza: 60, tipo: 'rettangolo', colore: '#aaa', sovrascrivibile: vero}, Edge: {tipo: 'bezier', sovrascrivibile: vero}, onBeforeCompute: funzione (nodo) {Log.write ("loading" + node.name);}, onAfterCompute: function () {Log.write ("done");}, onCreateLabel: function (label, node) {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 = '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 {cancella nodo. data. $ color; if (! node.anySubnode ("exist")) {var count = 0; node.eachSubn ode (funzione (n) {conta ++; }); node.data $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [count]; }}}, onBeforePlotLine: function (adj) {if (adj.nodeFrom.selected && adj.nodeTo.selected) {adj.data.$ color = "#eed"; adj.data $ lineWidth = 3; } else {cancella dati adj.$ color; cancella adj.data $ lineWidth; }}}); st.loadJSON (json); st.calcolo (); st.geom.translate (nuovo $ jit.Complex (-200, 0), "corrente"); st.onclick (st.root); Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo
