Arbre de l'espace avec JavaScript

C'est ici que ce plugin s'appelle Arbre de l'espace développé en Javascript qui nous permet d'afficher les informations sous forme d'arborescence, de manière dynamique et intuitive, à partir de structures organisationnelles ou de répertoires d'informations Arbre de l'espace il le fait.

• 1- Nous créons d'abord notre JSON, c'est lui qui contiendra toutes les données à afficher dans notre arbre, il faut veiller à établir la bonne structure et maintenir la relation père-fils dans notre JSON.

var json = {
identifiant : "nœud02",
nom : "0.2",
Les données: {},
enfants: [{
identifiant : "nœud13",
nom : "1.3",
Les données: {},… .

• 2 - Nous créons l'instance du composant Arbre de l'espace et on l'associe à un sélecteur dans ce cas l'id d'un élément :

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

• 3 - Nous ajoutons quelques options supplémentaires telles que la durée de l'animation et la distance entre chaque nœud parent et son enfant :

durée : 800,
transition : $ jit.Trans.Quart.easeInOut,
niveauDistance: 50,

• 4 - Ensuite, nous définissons le style des nœuds et des axes; hauteur, longueur, couleur et type de forme pouvant varier du rectangulaire au circulaire, il est important de mentionner que pour chaque nœud d'avoir un style individuel l'option contournable doit avoir la valeur vrai:

Ne donnent pas: {
hauteur: 20,
largeur: 60,
tapez : 'rectangle',
couleur : '#aaa',
remplaçable : vrai
},

Bord: {
tapez: 'bézier',
remplaçable : vrai
},

• 5 - Avec la méthode onCreateLabel Nous attribuons tous les événements et gestionnaires de notre arbre, ainsi que la possibilité d'attribuer des styles aux étiquettes dans chaque nœud :

onCreateLabel : fonction (étiquette, nœud) {
label.id = node.id;
label.innerHTML = node.name;
label.onclick = fonction () {
si (normal.vérifié) {
st.onclick (node.id);
} autre {
st.setRoot (node.id, 'animer');
}
};
var style = label.style;
style.largeur = 60 + 'px';
style.hauteur = 17 + 'px';
style.cursor = 'pointeur';
style.color = '# 333';
style.fontSize = '0.8em';
style.textAlign = 'center';
style.paddingTop = '3px';
},

• 6 - Avec la méthode onBeforePlotNode les propriétés d'un nœud sont modifiées avant d'être dessinées, comme changer la couleur d'un nœud en fonction de sa position ou du nombre d'enfants qu'il a.

onBeforePlotNode : fonction (nœud) {

if (node.selected) {

node.data.$ color = "# ff7";

}

autre {

supprimer node.data.$ color;

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

nombre de variables = 0;

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

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

}

}

},

• 7 - Avec la méthode onBeforePlotLine les propriétés des axes sont modifiées avant d'être dessinées :

onBeforePlotLine : fonction (adj) {
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data.$ color = "#eed";
adj.data.$ lineWidth = 3;
}
autre {
supprimer les données adj.$ color;
supprimer les données adj. $ lineWidth;
}
}
});

• 8 - Enfin, nous chargeons les données JSON :

st.loadJSON (json);
Le résultat final serait le suivant :

Voici le code source complet à essayer par vous-même :

 var st = new $ jit.ST ({injectInto : 'infovis', durée : 800, transition : $ jit.Trans.Quart.easeInOut, levelDistance : 50, Navigation : {enable : true, panoramique : true}, Node : { hauteur : 20, largeur : 60, type : 'rectangle', couleur : '#aaa', remplaçable : true}, Edge : {type : 'bezier', remplaçable : true}, onBeforeCompute : fonction (nœud) {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. $ color; if (! node.anySubnode ("exister")) {var count = 0; node.eachSubn ode (fonction (n) {compte ++; }); 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; } else {delete adj.data.$ color; supprimer les données adj. $ lineWidth; }}}); st.loadJSON (json); st.calculer (); st.geom.translate (nouveau $ jit.Complex (-200, 0), "current"); st.onclick (st.root); 

Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif