Comparte en Facebook Twitter Google+

Vue d3 banner

Una vista de árbol es un elemento de interfaz gráfica que presenta una vista jerárquica de información. En una vista de árbol cada elemento (también llamado rama o nodo) puede tener un número ilimitado de subelementos. Esto resulta muy útil para mostrar datos relacionados entre sí. En este tutorial aprenderemos a mostrar datos en una vista de árbol usando la librería de Vue.js Vue.D3.tree, basada en la popular librería para visualizaciones de datos D3.js.

Instalación

Instalamos la librería haciendo uso de NPM con el siguiente comando:

npm install vued3tree

Una vez finalizada la instalación procedemos a importarla a nuestra instancia de Vue:

Hecho esto podemos usar el componente en nuestra plantilla:

Sin embargo necesitamos datos que puedan ser representados en la vista de árbol. Vamos a agregar un nuevo objeto de datos en data:

Ahora podemos enlazar los datos de nuestro objeto treeData al componente tree:

Es importante que definas un width y height máximo para el div que encierre al componente tree.

Si ahora vas al navegador deberías de ver algo similar a esto:

vued3 first

Alterando el valor de la propiedad layoutType podemos cambiar la forma en la que los datos son mostrados. Podemos usar dos valores circular y euclidean. En el ejemplo superior usamos circular, vamos ahora a usar euclidean:

En el navegador deberíamos ver lo siguiente:

vued3 vista euclidean

euclideanes la vista por defecto, así que si omitimos la propiedad layoutType veremos los datos con este tipo de presentación.

Aprende más sobre Vue.js con nuestro libro La Elegancia de Vue 2 disponible en Leanpub

Leer más

Cambiar el tipo de estructura

Haciendo uso de la propiedad type podemos cambiar el tipo de estructura. Por defecto la estructura es tree, sin embargo podemos usar el tipo de estructura cluster, que es menos compacta y coloca todos los datos al mismo nivel. Para ello simplemente agregamos la propiedad type a nuestra plantilla:

Propiedades

Vue.D3.tree tiene una serie de propiedades que podemos usar para personalizar la forma en la que mostramos nuestros datos:

  • duration permite cambiar la duración de la animación (en milisegundos).
  • layoutType permite cambiar la forma en la que los datos son mostrados.
  • marginX define el margen para el axis X.
  • marginY define el margen para el axis Y.
  • nodeText define el nombre que queremos asignar a nuestro árbol.
  • type define el tipo de estructura.
  • zoomable si definimos su valor como true podemos hacer zoom en el árbol.

Espero que este tutorial te haya gustado y que lo aprendido pueda ser útil en tus proyectos. Para aprender más sobre Vue.D3.tree puedes revisar el repositorio oficial de GitHub.

Material relacionado

No olvides seguirnos en Twitter y suscribirte a nuestro boletín:

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Aprende desarrollo web con Laravel, Vue.js y mucho más a partir de 9 USD al mes: ver planes.