Indholdsfortegnelse
Det var her, dette plugin kaldte Rumtræ udviklet i Javascript der giver os mulighed for at vise oplysningerne i form af et træ på en dynamisk og intuitiv måde fra organisatoriske strukturer eller informationsmapper Rumtræ det gør det.
- 1- Først skaber vi vores JSON, det er den, der vil indeholde alle de data, der skal vises i vores træ, vi skal være omhyggelige med at etablere den korrekte struktur og opretholde forholdet mellem far og søn i vores JSON.
id: "node02",
navn: "0,2",
data: {},
børn: [{
id: "node13",
navn: "1.3",
data: {},… .
- 2 - Vi opretter instansen af komponenten Rumtræ og vi forbinder det med en vælger i dette tilfælde id for et element:
var st = ny $ jit.ST ({
injectInto: 'infovis', …
- 3 - Vi tilføjer nogle ekstra muligheder, såsom animationens varighed og afstanden mellem hver forældreknude og dens barn:
varighed: 800,
overgang: $ jit.Trans.Quart.easeInOut,
niveauDistance: 50,
- 4 - Derefter satte vi stilen for knudepunkter og akser; højde, længde, farve og formtype, der kan variere fra rektangulær til cirkulær, er det vigtigt at nævne, at hver knude har en individuel stil kan overskrides skal have værdien rigtigt:
Giv ikke: {
højde: 20,
bredde: 60,
type: 'rektangel',
farve: '#aaa',
overridable: sandt
},
Kant: {
type: 'bezier',
overridable: sandt
},
- 5 - Med metoden onCreateLabel Vi tildeler alle begivenheder og håndtere i vores træ, samt at vi kan tildele stilarter til etiketterne i hver knude:
onCreateLabel: function (label, node) {
label.id = node.id;
label.innerHTML = node.name;
label.onclick = funktion () {
hvis (normal. markeret) {
st.onclick (node.id);
} andet {
st.setRoot (node.id, 'animere');
}
};
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';
},
- 6 - Med metoden onBeforePlotNode egenskaberne for en knude ændres, før de tegnes, såsom at ændre farve på en knude afhængig af dens position eller hvor mange børn den har.
onBeforePlotNode: funktion (node) {
hvis (node.selected) {
node.data. $ color = "# ff7";
}
andet {
slet node.data. $ color;
hvis (! node.anySubnode ("findes")) {
var count = 0;
node.eachSubnode (funktion (n) {count ++;});
node.data. $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [count];
}
}
},
- 7 - Med metoden onBeforePlotLine aksernes egenskaber ændres, før de tegnes:
onBeforePlotLine: function (adj) {
hvis (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data. $ color = "#eed";
adj.data. $ lineWidth = 3;
}
andet {
slet adj.data. $ color;
slet adj.data. $ lineWidth;
}
}
});
- 8 - Endelig indlæser vi JSON -data:
Det endelige resultat ville være følgende:
var st = ny $ jit.ST ({injectInto: 'infovis', varighed: 800, overgang: $ jit.Trans.Quart.easeInOut, levelDistance: 50, Navigation: {enable: true, panorering: true}, Node: { højde: 20, bredde: 60, type: 'rektangel', farve: '#aaa', overridable: true}, kant: {type: 'bezier', overridable: true}, onBeforeCompute: function (node) {Log.write ("indlæser" + node.navn);}, 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; hvis (! node.anySubnode ("findes")) {var count = 0; node.eachSubn ode (funktion (n) {count ++; }); 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; } ellers {slette adj.data. $ color; slet adj.data. $ lineWidth; }}}); st.loadJSON (json); st.compute (); st.geom.translate (ny $ jit.Complex (-200, 0), "nuværende"); st. klik (st. rod); Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt 
