Innholdsfortegnelse
Det er her denne pluginen heter Mellomrom utviklet i Javascript som lar oss vise informasjonen i form av et tre, på en dynamisk og intuitiv måte, fra organisasjonsstrukturer eller informasjonskataloger Mellomrom det gjør det.
- 1- Først lager vi vår JSON, det er den som vil inneholde alle dataene som skal vises i treet vårt, vi må være forsiktige med å etablere riktig struktur og opprettholde forholdet mellom far og sønn i vår JSON.
id: "node02",
navn: "0.2",
data: {},
barn: [{
id: "node13",
navn: "1.3",
data: {},….
- 2 - Vi lager forekomsten av komponenten Mellomrom og vi knytter det til en velger i dette tilfellet id for et element:
var st = ny $ jit.ST ({
injectInto: 'infovis', …
- 3 - Vi legger til noen flere alternativer, for eksempel animasjonens varighet og avstanden mellom hver overordnede node og barnet:
varighet: 800,
overgang: $ jit.Trans.Quart.easeInOut,
nivå Avstand: 50,
- 4 - Deretter satte vi stilen for noder og akser; høyde, lengde, farge og formtype som kan variere fra rektangulær til sirkulær, er det viktig å nevne at for hver node å ha en individuell stil alternativet kan overskrives må ha verdien ekte:
Ikke gi: {
høyde: 20,
bredde: 60,
type: 'rektangel',
farge: '#aaa',
overridable: true
},
Kant: {
type: 'bezier',
overridable: true
},
- 5 - Med metoden onCreateLabel Vi tildeler alle hendelser og behandlere av treet vårt, i tillegg til at vi kan tilordne stiler til etikettene i hver node:
onCreateLabel: function (label, node) {
label.id = node.id;
label.innerHTML = node.name;
label.onclick = function () {
hvis (normal. merket) {
st.onclick (node.id);
} annet {
st.setRoot (node.id, 'animere');
}
};
var style = label.style;
style.width = 60 + 'px';
style.height = 17 + 'px';
style.cursor = 'peker';
style.color = '# 333';
style.fontSize = '0.8em';
style.textAlign = 'center';
style.paddingTop = '3px';
},
- 6 - Med metoden onBeforePlotNode egenskapene til en node endres før de tegnes, for eksempel å endre fargen på en node avhengig av posisjonen eller hvor mange barn den har.
onBeforePlotNode: function (node) {
hvis (node.selected) {
node.data. $ color = "# ff7";
}
annet {
slett node.data. $ color;
if (! node.anySubnode ("exist")) {
var count = 0;
node.eachSubnode (funksjon (n) {count ++;});
node.data. $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [count];
}
}
},
- 7 - Med metoden onBeforePlotLine aksenes egenskaper endres før de trekkes:
onBeforePlotLine: function (adj) {
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data. $ color = "#eed";
adj.data. $ lineWidth = 3;
}
annet {
slett adj.data. $ color;
slett adj.data. $ lineWidth;
}
}
});
- 8 - Til slutt laster vi inn JSON -dataene:
Det endelige resultatet vil være følgende:
var st = ny $ jit.ST ({injectInto: 'infovis', varighet: 800, overgang: $ jit.Trans.Quart.easeInOut, levelDistance: 50, Navigasjon: {enable: true, panorering: true}, Node: { høyde: 20, bredde: 60, type: 'rektangel', farge: '#aaa', overridable: true}, kant: {type: 'bezier', overridable: true}, onBeforeCompute: function (node) {Log.write ("lasting" + 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 = 'peker'; 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 (funksjon (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; } annet {slett adj.data. $ color; slett adj.data. $ lineWidth; }}}); st.loadJSON (json); st.compute (); st.geom.translate (new $ jit.Complex (-200, 0), "current"); st. klikk (st. rot); Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng 
