Cargando

Ir a contenido

X
CyberGhost VPN: la solución VPN definitiva
OFERTA EXCLUSIVA
Ver Más! Protege tus datos personales por solo 2,75 € al mes. No pases más tiempo con tu IP expuesta. Además podrás usarlo para saltar limites geográficos de IP por ej en NetFlix como si estuvieras en EEUU

 


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 ago 12 2013 01:05


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.

Javascript-spacetree.jpg

  • 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:

Javascript-spacetree-2.jpg


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


AYUDA A MEJORAR ESTE TUTORIAL!

¿Crees que puedes corregir o mejorar este tutorial? Puedes enviar tu Edición con los cambios que consideres útiles.

0 usuarios han editado este tutorial. ¡Edita y conviértete en un reconocido experto!


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!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado ago 12 2013 01:05
  •   Visitas 973