Cargando

Ir a contenido


TEST
 


Spacetree con JavaScript

Muchas veces queremos que nuestro site destaque por encima de muchos otros por funcionalidad o simplemente usabilidad. Queremos que la información sea desplegada al usuario de la manera más eficiente y vistosa posible y que la navegabilidad de esta información se vuelva lo más intuitiva posible.


Escrito por el ago 12 2013 01:05 spacetree javascript


Aquí es donde entra este plugin llamado Spacetree desarrollado en Javascript que nos permite desplegar la información en forma de árbol, de manera dinámica e intuitiva, desde estructuras organizativas o directorios de información Spacetree lo hace.

  • 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.
var json = {
id: "node02",
name: "0.2",
data: {},
children: [{
id: "node13",
name: "1.3",
data: {}, ….
  • 2 - Creamos la instancia del componente de Spacetree y lo asociamos a un selector en este caso el id de un elemento:

var st = new $jit.ST({
injectInto: 'infovis', …
  • 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:

duration: 800,
transition: $jit.Trans.Quart.easeInOut,
levelDistance: 50,
  • 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:

Node: {
height: 20,
width: 60,
type: 'rectangle',
color: '#aaa',
overridable: true
},

Edge: {
type: 'bezier',
overridable: 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:

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';
},
  • 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:

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;
}
}
});
  • 8 - Por último cargamos la data del JSON:
st.loadJSON(json);

El resultado final sería el siguiente:


Aquí el código fuente completo para que lo prueben por ustedes mismos:

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); 
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado ago 12 2013 01:05
  •   Visitas 783



Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse