Inhoudsopgave
Dit is waar deze plug-in aanriep Ruimteboom ontwikkeld in Javascript waarmee we de informatie in de vorm van een boom kunnen weergeven, op een dynamische en intuïtieve manier, uit organisatiestructuren of informatiefolders Ruimteboom het doet.
- 1- Eerst maken we onze JSON, het is degene die alle gegevens zal bevatten om in onze stamboom weer te geven, we moeten voorzichtig zijn om de juiste structuur vast te stellen en de relatie van vader en zoon in onze JSON.
id: "node02",
naam: "0.2",
gegevens: {},
kinderen: [{
id: "knooppunt13",
naam: "1.3",
gegevens: {},… .
- 2 - We maken de instantie van de component Ruimteboom en we koppelen het aan een selector, in dit geval de id van een element:
var st = nieuw $ jit.ST ({
injectInto: 'infovis',…
- 3 - We voegen enkele extra opties toe, zoals de duur van de animatie en de afstand tussen elk bovenliggend knooppunt en zijn kind:
duur: 800,
overgang: $ jit.Trans.Quart.easeInOut,
niveauAfstand: 50,
- 4 - Vervolgens stellen we de stijl in voor de knooppunten en assen; hoogte, lengte, kleur en type vorm die kan variëren van rechthoekig tot rond, het is belangrijk om te vermelden dat voor elk knooppunt een individuele stijl de optie is overschrijfbaar moet de waarde hebben waar:
Geef niet: {
hoogte: 20,
breedte: 60,
typ: 'rechthoek',
kleur: '#aaa',
overschrijfbaar: waar
},
Rand: {
type: 'bezier',
overschrijfbaar: waar
},
- 5 - Met de methode onCreateLabel We wijzen alle gebeurtenissen en handlers van onze boom toe, en we kunnen ook stijlen toewijzen aan de labels in elk knooppunt:
onCreateLabel: functie (label, knoop) {
label.id = knooppunt.id;
label.innerHTML = knooppunt.naam;
label.onclick = functie () {
if (normaal.aangevinkt) {
st.onclick (node.id);
} anders {
st.setRoot (node.id, 'animeren');
}
};
var stijl = label.stijl;
stijl.breedte = 60 + 'px';
stijl.hoogte = 17 + 'px';
style.cursor = 'aanwijzer';
stijl.kleur = '# 333';
style.fontSize = '0.8em';
style.textAlign = 'midden';
style.paddingTop = '3px';
},
- 6 - Met de methode onBeforePlotNode de eigenschappen van een knooppunt worden gewijzigd voordat het wordt getekend, zoals het veranderen van de kleur van een knooppunt, afhankelijk van de positie of het aantal kinderen dat het heeft.
onBeforePlotNode: functie (knooppunt) {
if (knooppunt.geselecteerd) {
node.data $ color = "# ff7";
}
anders {
verwijder node.data $ kleur;
if (! node.anySubnode ("bestaan")) {
aantal var = 0;
node.eachSubnode (functie (n) {count ++;});
node.data $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [telling];
}
}
},
- 7 - Met de methode onBeforePlotLine de eigenschappen van de assen worden gewijzigd voordat ze worden getekend:
onBeforePlotLine: functie (adj) {
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data $ color = "#eed";
adj.data $ lineWidth = 3;
}
anders {
verwijder adj.data $ kleur;
verwijder adj.data $ lineWidth;
}
}
});
- 8 - Ten slotte laden we de JSON-gegevens:
Het uiteindelijke resultaat zou het volgende zijn:
var st = nieuw $ jit.ST ({injectInto: 'infovis', duur: 800, overgang: $ jit.Trans.Quart.easeInOut, levelDistance: 50, Navigatie: {enable: true, panning: true}, Node: { hoogte: 20, breedte: 60, type: 'rechthoek', kleur: '#aaa', overridable: true}, Edge: {type: 'bezier', overridable: true}, onBeforeCompute: functie (knooppunt) {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 {delete node. data. $ kleur; if (! node.anySubnode ("exist")) {var count = 0; node.eachSubn ode (functie (n) {tel ++; }); node.data $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [telling]; }}}, onBeforePlotLine: function (adj) {if (adj.nodeFrom.selected && adj.nodeTo.selected) {adj.data. $ color = "#eed"; adj.data $ lineWidth = 3; } else {verwijder adj.data. $ kleur; verwijder adj.data $ lineWidth; }}}); st.loadJSON (json); st.berekenen (); st.geom.translate (nieuw $ jit.Complex (-200, 0), "huidig"); st.onclick (st.root); Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven 
