Árbol con sangrías

Jerarquía detallada con su valor.

Definición

Un árbol con sangrías lista los nodos de una jerarquía uno por fila, sangrados según su nivel, con una barra y su valor alineados en una columna. Se leen a la vez la hoja, su subtotal y el total, y se ve a qué altura del árbol se concentra el dinero. Se usa para facturas, presupuestos y desgloses de coste con varios niveles.

Editar con tus datos SVG Spec JSON

La partida más cara de la factura cloud no es una máquina: es mover datos

Datos: label · parent · value
Buena para: Leer cada partida de un desglose con su subtotal y descubrir en qué nivel intermedio se concentra el valor.
Evítala cuando: Cuando el mensaje es qué fracción del total ocupa cada rama: esta forma no lo afirma.
Se lee bien: Entre 3 y 30 elementos; dibuja hasta 30
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é
`label`	string	El nombre del nodo, una fila por nodo. Es su IDENTIDAD: es lo que sus hijos citan en la columna de padre, así que no se puede repetir y no puede ir vacío.
`parent`	string	El nombre del padre del nodo; celda vacía = raíz. La arista se declara, no se agrupa: un padre que no existe como fila falla nombrando las filas que lo citan, y una cadena de padres que se muerde la cola también.
`value`	number	El valor del nodo. Las hojas lo necesitan; un nodo interno puede dejar la celda VACÍA y su subtotal se suma de sus hijos. Si lo declara y no cuadra con la suma (tolerancia 0,5 %), se aborta con las dos cifras. No admite negativos: una barra mide su número como longitud.

Tamaños

Recompuesta, no encogida

El motor vuelve a componer la pieza a cada ancho: los rótulos conservan su cuerpo y la figura gana alto si lo necesita.

Móvil · 528 × 692 px

Escritorio · 988 × 822 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Necesitas leer la cifra de cada línea y su subtotal?

Si basta con ver qué ramas pesan más dentro del total, el treemap lo enseña con el área.

Sí: quédate con árbol con sangrías

No: usa Treemap

¿El desglose tiene varios niveles?

Con una lista plana sin padres, un ranking de barras horizontales es más directo.

Sí: quédate con árbol con sangrías

No: usa Gráfico de barras horizontales

¿Te interesa la cifra de cada nodo más que el reparto en bloques por nivel?

Si quieres ver cada nivel como una franja donde el ancho es la parte del padre, el gráfico de carámbanos lo dibuja.

Sí: quédate con árbol con sangrías

No: usa Gráfico de carámbanos

Código

La misma pieza, con tus datos

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

const spec = await getPreset('indentedtree');
spec.data.rows = misFilas; // label, parent, value
const { svg, warnings } = await renderComposition(spec);

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

Dudas

¿Qué pasa si un subtotal no cuadra con sus líneas?

Un nodo interno puede dejar el valor vacío y se suma de sus hijos. Si lo declara y no cuadra con un margen del 0,5 %, la lámina no se publica y se dan las dos cifras.

¿Por qué no enseña porcentajes del total?

Porque las barras miden valores, no fracciones del todo. Para afirmar qué parte ocupa cada rama están las formas de área.

¿Admite valores negativos?

No: una barra mide su número como longitud.

¿Qué hace si faltan datos?

Omite el valor ausente y lo declara aparte.

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

El motor la recompone a 480 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.

Relacionadas