Spacetree con JavaScript

• 1- Primero creamos nuestro JSON, el mismo es quien contendrá toda la data a desplegar en nuestro árbol, debemos ser cuidadosos de establecer la estructura correcta y mantener la relación de padre e hijo en nuestro JSON.

• 2 - Creamos la instancia del componente de Spacetree y lo asociamos a un selector en este caso el id de un elemento:

• 3 - Añadimos algunas opciones adicionales tales como la duración de la animación y la distancia entre cada nodo padre y su hijo:

• 4 - Luego configuramos el estilo para los nodos y los ejes; altura, largo, color y tipo de forma que puede variar desde rectangular hasta circular, es importante mencionar que para que cada nodo tenga un estilo individual la opción overridable debe tener el valor true:

• 5 - Con el método onCreateLabel asignamos todos los eventos y manejadores de nuestro árbol, así como poder asignarles estilos a las etiquetas en cada nodo:

• 6 - Con el método onBeforePlotNode se cambian las propiedades de un nodo antes de ser dibujado, como por ejemplo cambiar el color de un nodo dependiendo de su posición o de cuantos hijos tiene.

onBeforePlotNode: function(node){

if (node.selected) {

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

}

else {

delete node.data.$color;

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

var count = 0;

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

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

}

}

},

• 7 - Con el método onBeforePlotLine se cambian las propiedades de los ejes antes de ser dibujado:

• 8 - Por último cargamos la data del JSON:

var st = new $jit.ST({ 
    injectInto: 'infovis', 
    duration: 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, '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("exist")) { 
			    var count = 0; 
			    node.eachSubnode(function(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; 
	    } 
	    else { 
		    delete adj.data.$color; 
		    delete adj.data.$lineWidth; 
	    } 
    } 
}); 
st.loadJSON(json); 
st.compute(); 
st.geom.translate(new $jit.Complex(-200, 0), "current"); 
st.onclick(st.root);