Árbol jerárquico

Jerarquía de elementos sin medidas.

Definición

El árbol jerárquico dibuja nodos que cuelgan de otros, de la raíz a las hojas, con aristas que nunca se cruzan. Se lee como pertenencia: cada nodo es parte del de arriba, y las hojas se distinguen de los nodos internos. Sirve para explicar una clasificación, una estructura de temas o un desglose sin cifras.

Editar con tus datos SVG Spec JSON

Tres preguntas deciden si un valor es una función o una propiedad guardada

Datos: id · padre · nodo · detalle · arista · rol
Buena para: Mostrar qué pertenece a qué en una jerarquía sin medidas.
Evítala cuando: Cuando cada nodo tiene un valor que comparar: el árbol no dibuja ninguna cifra.
Se lee bien: Entre 3 y 14 elementos; dibuja hasta 24
Datos que faltan: Omite el valor ausente y lo declara aparte.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`id` · opcional	string	La clave del nodo, con la que sus hijos lo citan. Medido: una fila con este campo en blanco SE VA del dibujo con su arista (24→21 marcas, 13→11 subtrazos), y sin la columna en ninguna fila el árbol dibuja plano.
`padre` · opcional	string	El `id` del nodo del que cuelga. Vacío = la raíz.
`nodo` · opcional	string	El rótulo del nodo. Medido: sin él el nodo sigue dibujado.
`detalle` · opcional	string	La línea de apoyo.
`arista` · opcional	string	El rótulo de la arista que llega al nodo («sí», «no»).
`rol` · opcional	string	neutro · foco · alerta · ausente · favorable.

Tamaños

Ancha por necesidad

Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.

A menos de 480 px sus rótulos no caben sin pisarse o recortarse, y el motor no la publica así. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.

Cuándo usarla

Tres preguntas antes de elegirla

¿Basta con la jerarquía, sin un valor en cada nodo?

Si cada nodo tiene un valor que importa, el árbol con sangrías lo escribe junto a cada rama.

Sí: quédate con árbol jerárquico

No: usa Árbol con sangrías

¿Es una jerarquía de conceptos y no un organigrama?

Si lo que dibujas son personas y puestos, el organigrama es la forma conocida.

Sí: quédate con árbol jerárquico

No: usa Organigrama

¿Se lee como pertenencia y no como decisiones con resultados?

Si cada rama es una opción con probabilidades y resultados, el árbol de decisión los recoge.

Sí: quédate con árbol jerárquico

No: usa Árbol de decisión

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('concept-tree');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Cómo se distingue una hoja?

Por el borde por el que le llega la arista: la hoja lo lleva distinto del de los nodos internos, para que se lea como un final.

¿Puedo rotular las aristas?

Sí. Cada nodo puede llevar el rótulo de la arista que le llega, por ejemplo «sí» o «no».

¿Cuántos nodos admite?

Se lee bien entre tres y catorce.

¿Qué hace si faltan datos?

Omite el valor ausente y lo declara aparte.

¿Cómo se ve en el móvil?

A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.

Relacionadas

Otras formas de responder «partes de un todo»

Guía para elegir: partes de un todo →