Obsah
Zde se tento plugin nazývá Prostor vyvinut v Javascript to nám umožňuje zobrazit informace ve formě stromu dynamickým a intuitivním způsobem z organizačních struktur nebo informačních adresářů Spacetree to dělá.
- 1- Nejprve vytvoříme naše JSON„Je to ten, kdo bude obsahovat všechna data, která se mají zobrazit v našem stromě, musíme být opatrní, abychom vytvořili správnou strukturu a udržovali v našem vztahu vztah otce a syna JSON.
id: "node02",
název: "0,2",
údaje: {},
děti: [{
id: "node13",
název: "1.3",
údaje: {},….
- 2 - Vytvoříme instanci komponenty Prostor a přiřadíme jej k voliči, v tomto případě id prvku:
var st = nový $ jit.ST ({
injectInto: 'infovis',…
- 3 - Přidáme několik dalších možností, jako je doba trvání animace a vzdálenost mezi každým nadřazeným uzlem a jeho podřízeným:
doba trvání: 800,
přechod: $ jit.Trans.Quart.easeInOut,
úroveň Vzdálenost: 50,
- 4 - Poté nastavíme styl pro uzly a osy; výška, délka, barva a typ tvaru, který se může lišit od obdélníkového po kruhový, je důležité zmínit, že pro každý uzel má individuální styl přepisovatelný musí mít hodnotu skutečný:
Nedávej: {
výška: 20,
šířka: 60,
typ: 'obdélník',
barva: '#aaa',
přepisovatelný: pravda
},
Okraj: {
typ: 'bezier',
přepisovatelný: pravda
},
- 5 - S metodou onCreateLabel Přiřadíme všechny události a obslužné rutiny našeho stromu a také budeme moci přiřadit styly štítkům v každém uzlu:
onCreateLabel: funkce (štítek, uzel) {
label.id = node.id;
label.innerHTML = název uzlu;
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 = 'centrum';
style.paddingTop = '3px';
},
- 6 - S metodou onBeforePlotNode vlastnosti uzlu se před vykreslením změní, jako například změna barvy uzlu v závislosti na jeho poloze nebo počtu podřízených objektů.
onBeforePlotNode: funkce (uzel) {
if (node.selected) {
node.data. $ color = "# ff7";
}
jinak {
odstranit node.data. $ color;
if (! node.anySubnode ("exist")) {
počet varů = 0;
node.eachSubnode (funkce (n) {count ++;});
node.data. $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [počet];
}
}
},
- 7 - S metodou onBeforePlotLine vlastnosti os se před nakreslením změní:
onBeforePlotLine: funkce (adj) {
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data. $ color = "#eed";
adj.data. $ lineWidth = 3;
}
jinak {
odstranit adj.data. $ color;
odstranit adj.data. $ lineWidth;
}
}
});
- 8 - Nakonec načteme data JSON:
Konečný výsledek by byl následující:
var st = new $ jit.ST ({injectInto: 'infovis', duration: 800, transition: $ jit.Trans.Quart.easeInOut, levelDistance: 50, Navigation: {enable: true, panning: true}, Node: { výška: 20, šířka: 60, typ: 'obdélník', barva: '#aaa', overridable: true}, Edge: {typ: 'bezier', overridable: true}, onBeforeCompute: funkce (uzel) {Log.write ("načítání" + název uzlu);}, 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 {delete node. data. $ color; if (! node.anySubnode ("exist")) {var count = 0; node.eachSubn ode (funkce (n) {count ++; }); node.data. $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [počet]; }}}, onBeforePlotLine: funkce (adj) {if (adj.nodeFrom.selected && adj.nodeTo.selected) {adj.data. $ color = "#eed"; adj.data. $ lineWidth = 3; } else {smazat adj.data. $ color; odstranit adj.data. $ lineWidth; }}}); st.loadJSON (json); st.compute (); st.geom.translate (nový $ jit.Complex (-200, 0), "aktuální"); st.onclick (st.root); Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod 
