Spacetree z JavaScript

Tutaj nazywa się ta wtyczka Kosmiczne drzewo opracowany w JavaScript która pozwala nam w dynamiczny i intuicyjny sposób wyświetlać informacje w formie drzewa ze struktur organizacyjnych lub katalogów informacyjnych Kosmiczne drzewo to robi.

• 1- Najpierw tworzymy nasze JSON, to ten, który będzie zawierał wszystkie dane do wyświetlenia w naszym drzewie, musimy uważać, aby ustalić prawidłową strukturę i utrzymać relację ojca i syna w naszym JSON.

var json = {
id: "węzeł02",
nazwa: "0.2",
dane: {},
dzieci: [{
id: "węzeł13",
nazwa: „1.3”,
dane: {},… .

• 2 - Tworzymy instancję komponentu Kosmiczne drzewo i kojarzymy go z selektorem w tym przypadku id elementu:

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

• 3 - Dodajemy kilka dodatkowych opcji, takich jak czas trwania animacji i odległość między każdym węzłem nadrzędnym a jego dzieckiem:

czas trwania: 800,
przejście: $ jit.Trans.Quart.easeInOut,
poziomOdległość: 50,

• 4 - Następnie ustawiamy styl dla węzłów i osi; wysokość, długość, kolor i rodzaj kształtu, który może się różnić od prostokątnego do okrągłego, należy wspomnieć, że dla każdego węzła, aby mieć indywidualny styl opcja nadrzędny musi mieć wartość prawda:

Nie dawaj: {
wzrost: 20,
szerokość: 60,
typ: 'prostokąt',
kolor: '#aaa',
nadrzędne: prawda
},

Krawędź: {
typ: 'bezier',
nadrzędne: prawda
},

• 5 - Metodą onCreateLabel Przypisujemy wszystkie zdarzenia i procedury obsługi naszego drzewa, a także jesteśmy w stanie przypisać style do etykiet w każdym węźle:

onCreateLabel: function (etykieta, węzeł) {
etykieta.id = węzeł.id;
label.innerHTML = node.name;
label.onclick = funkcja () {
jeśli (normalne.zaznaczone) {
st.onclick (node.id);
} w przeciwnym razie {
st.setRoot (node.id, 'animacja');
}
};
var style = label.style;
styl.szerokość = 60 + 'px';
styl.wysokość = 17 + 'px';
style.cursor = 'wskaźnik';
styl.kolor = '# 333';
style.fontSize = '0,8 em';
style.textAlign = 'środek';
style.paddingTop = '3px';
},

• 6 - Metodą onBeforePlotNode właściwości węzła są zmieniane przed narysowaniem, na przykład zmiana koloru węzła w zależności od jego pozycji lub liczby posiadanych elementów potomnych.

onBeforePlotNode: function (węzeł) {

jeśli (węzeł.zaznaczony) {

node.data $ kolor = "# ff7";

}

w przeciwnym razie {

usuń node.data $ kolor;

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

liczba zmiennych = 0;

node.eachSubnode (funkcja (n) {liczba ++;});

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

}

}

},

• 7 - Metodą onBeforePlotLine właściwości osi są zmieniane przed narysowaniem:

onBeforePlotLine: function (przym) {
if (przym.nodeFrom.selected && adj.nodeTo.selected) {
adj.dane $ kolor = "#eed";
adj.dane $ lineWidth = 3;
}
w przeciwnym razie {
usuń przym.dane $ kolor;
usuń przym.dane $ lineWidth;
}
}
});

• 8 - Na koniec ładujemy dane JSON:

st.loadJSON (json);
Ostateczny wynik byłby następujący:

Oto kompletny kod źródłowy, który możesz wypróbować samodzielnie:

 var st = new $ jit.ST ({injectInto: 'infovis', czas trwania: 800, przejście: $ jit.Trans.Quart.easeInOut, levelDistance: 50, nawigacja: {enable: true, panning: true}, węzeł: { wysokość: 20, szerokość: 60, typ: 'prostokąt', kolor: '#aaa', możliwość nadpisania: prawda}, Krawędź: {typ: 'bezier', nadpisanie: prawda}, onBeforeCompute: function (węzeł) {Log.write ("loading" + node.name);}, onAfterCompute: function () {Log.write ("done");}, onCreateLabel: function (etykieta, węzeł) {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 {delete node. dane. $ color; if (! node.anySubnode ("istnieje")) {var count = 0; node.eachSubn ode (funkcja (n) {liczba ++; }); node.data $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [liczba]; }}}, onBeforePlotLine: function (przym) {if (przym.nodeFrom.selected && przym.nodeTo.selected) {przym.data. $ color = "#eed"; adj.dane $ lineWidth = 3; } else {usuń przym.dane $ kolor; usuń adj.data $ lineWidth; }}}); st.loadJSON (json); st.compute (); st.geom.translate (nowy $ jit.Complex (-200, 0), "bieżący"); st.onclick (st.root); 

Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt