Innehållsförteckning
Det var här detta plugin kallades Spacetree utvecklat i Javascript som gör att vi kan visa informationen i form av ett träd, på ett dynamiskt och intuitivt sätt, från organisationsstrukturer eller informationskataloger Spacetree det gör det.
- 1- Först skapar vi vår JSON, det är den som kommer att innehålla all data som ska visas i vårt träd, vi måste vara noga med att upprätta rätt struktur och upprätthålla förhållandet mellan far och son i vår JSON.
id: "nod02",
namn: "0.2",
data: {},
barn: [{
id: "nod13",
namn: "1.3",
data: {},….
- 2 - Vi skapar instansen av komponenten Spacetree och vi associerar det till en väljare i detta fall id för ett element:
var st = new $ jit.ST ({
injectInto: 'infovis', …
- 3 - Vi lägger till några ytterligare alternativ, till exempel animationens varaktighet och avståndet mellan varje föräldernod och dess barn:
Längd: 800,
övergång: $ jit.Trans.Quart.easeInOut,
nivåDistans: 50,
- 4 - Sedan ställer vi in stilen för noder och axlar; höjd, längd, färg och typ av form som kan variera från rektangulär till cirkulär är det viktigt att nämna att för varje nod att ha en individuell stil alternativet överkrypbar måste ha värdet Sann:
Ge inte: {
höjd: 20,
bredd: 60,
typ: 'rektangel',
färg: '#aaa',
overridable: sant
},
Kant: {
typ: 'bezier',
overridable: sant
},
- 5 - Med metoden onCreateLabel Vi tilldelar alla händelser och hanterare i vårt träd, samt kan tilldela stilar till etiketterna i varje nod:
onCreateLabel: function (label, node) {
label.id = nod.id;
label.innerHTML = nod.namn;
label.onclick = function () {
om (normal. markerad) {
st.onclick (nod.id);
} annat {
st.setRoot (nod.id, 'animera');
}
};
var style = label.style;
style.width = 60 + 'px';
style.height = 17 + 'px';
style.cursor = 'pekare';
style.color = '# 333';
style.fontSize = '0,8em';
style.textAlign = 'center';
style.paddingTop = '3px';
},
- 6 - Med metoden onBeforePlotNode egenskaperna hos en nod ändras innan de ritas, till exempel att ändra färg på en nod beroende på dess position eller hur många barn den har.
onBeforePlotNode: function (nod) {
om (nod. vald) {
nod.data. $ color = "# ff7";
}
annat {
ta bort nod.data. $ color;
om (! node.anySubnode ("finns")) {
var count = 0;
nod.eachSubnode (funktion (n) {count ++;});
nod.data. $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [count];
}
}
},
- 7 - Med metoden onBeforePlotLine axlarnas egenskaper ändras innan de dras:
onBeforePlotLine: function (adj) {
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data. $ color = "#eed";
adj.data. $ lineWidth = 3;
}
annat {
radera adj.data. $ color;
radera adj.data. $ lineWidth;
}
}
});
- 8 - Slutligen laddar vi JSON -data:
Det slutliga resultatet skulle bli följande:
var st = new $ jit.ST ({injectInto: 'infovis', duration: 800, transition: $ jit.Trans.Quart.easeInOut, levelDistance: 50, Navigation: {enable: true, panning: true}, Node: { höjd: 20, bredd: 60, typ: 'rektangel', färg: '#aaa', överkodningsbar: true}, kant: {typ: 'bezier', överkodningsbar: true}, onBeforeCompute: funktion (nod) {Log.write ("laddar" + nod.namn);}, 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 = 'pekare'; 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 ("finns")) {var count = 0; node.eachSubn ode (funktion (n) {count ++; }); nod.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; } annat {ta bort adj.data. $ color; radera adj.data. $ lineWidth; }}}); st.loadJSON (json); st.compute (); st.geom.translate (new $ jit.Complex (-200, 0), "current"); st.onclick (st.root); Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng 
