Spacetree mit JavaScript

Hier heißt dieses Plugin Weltraumbaum entwickelt in Javascript die es uns ermöglicht, die Informationen in Form eines Baumes dynamisch und intuitiv aus Organisationsstrukturen oder Informationsverzeichnissen anzuzeigen Weltraumbaum es tut.

• 1- Zuerst erstellen wir unsere JSON, es ist derjenige, der alle Daten enthält, die in unserem Baum angezeigt werden sollen. Wir müssen auf die richtige Struktur achten und die Beziehung zwischen Vater und Sohn in unserem JSON.

var json = {
id: "node02",
Name: "0.2",
Daten: {},
Kinder: [{
id: "node13",
Name: "1.3",
Daten: {},… .

• 2 - Wir erstellen die Instanz der Komponente Weltraumbaum und wir ordnen es einem Selektor zu, in diesem Fall die ID eines Elements:

var st = neu $ jit.ST ({
injectInto: 'infovis',…

• 3 - Wir fügen einige zusätzliche Optionen wie die Dauer der Animation und den Abstand zwischen jedem Elternknoten und seinem Kind hinzu:

Dauer: 800,
Übergang: $ jit.Trans.Quart.easeInOut,
levelDistanz: 50,

• 4 - Dann legen wir den Stil für die Knoten und Achsen fest; Höhe, Länge, Farbe und Art der Form, die von rechteckig bis kreisförmig variieren kann, ist es wichtig zu erwähnen, dass für jeden Knoten ein individueller Stil verfügbar ist überschreibbar muss den Wert haben Stimmt:

Gib nicht: {
Höhe: 20,
Breite: 60,
Typ: 'Rechteck',
Farbe: '#aaa',
überschreibbar: wahr
},

Kante: {
Typ: 'bezier',
überschreibbar: wahr
},

• 5 - Mit der Methode onCreateLabel Wir weisen alle Ereignisse und Handler unseres Baums zu und können den Labels in jedem Knoten Stile zuweisen:

onCreateLabel: Funktion (Label, Knoten) {
label.id = Knoten.id;
label.innerHTML = Knoten.name;
label.onclick = Funktion () {
if (normal.checked) {
st.onclick (node.id);
} anders {
st.setRoot (node.id, 'animieren');
}
};
var style = label.style;
style.width = 60 + 'px';
style.height = 17 + 'px';
style.cursor = 'Zeiger';
style.color = '#333';
style.fontSize = '0.8em';
style.textAlign = 'center';
style.paddingTop = '3px';
},

• 6 - Mit der Methode onBeforePlotNode Die Eigenschaften eines Knotens werden vor dem Zeichnen geändert, z. B. die Farbe eines Knotens in Abhängigkeit von seiner Position oder der Anzahl seiner untergeordneten Elemente.

onBeforePlotNode: Funktion (Knoten) {

if (node.selected) {

Knoten.Daten $ color = "# ff7";

}

anders {

lösche node.data $ color;

if (! node.anySubnode ("exist")) {

Varzahl = 0;

node.eachSubnode (Funktion (n) {count ++;});

node.data $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [count];

}

}

},

• 7 - Mit der Methode onBeforePlotLine die Eigenschaften der Achsen werden vor dem Zeichnen geändert:

onBeforePlotLine: Funktion (adj) {
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.daten $ color = "#eed";
adj.daten $ lineWidth = 3;
}
anders {
adj.data löschen $ color;
adj.data löschen $ lineWidth;
}
}
});

• 8 - Schließlich laden wir die JSON-Daten:

st.loadJSON (json);
Das Endergebnis wäre folgendes:

Hier ist der vollständige Quellcode, den Sie selbst ausprobieren können:

 var st = new $ jit.ST ({injectInto: 'infovis', Dauer: 800, Transition: $ jit.Trans.Quart.easeInOut, levelDistance: 50, Navigation: {enable: true, panning: true}, Node: { height: 20, width: 60, type: 'rectangle', color: '#aaa', overridable: true}, Edge: {type: 'bezier', overridable: true}, onBeforeCompute: function (node) {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, 'animieren');}}; var style = label.style; style.width = 60 + 'px'; style.height = 17 + 'px'; style.cursor = 'Zeiger'; 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 (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.daten $ lineWidth = 3; } else {adj.data löschen.$ color; adj.data löschen $ lineWidth; }}}); st.loadJSON (json); st.berechnen (); st.geom.translate (neu $ jit.Complex (-200, 0), "aktuell"); st.onclick (st.root); 

Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben