Enlaces agrupados jerárquicos

Conexiones sobre una jerarquía, sin enredos.

Definición

Los enlaces agrupados jerárquicos colocan las hojas de una jerarquía —módulos, equipos, especialidades— y agrupan las curvas que las unen a lo largo de sus ramas. Se lee si los vínculos se quedan dentro de su rama o la cruzan, y la pieza lo resume en una cifra. Se usa para revisar dependencias de software o colaboración entre áreas.

Editar con tus datos SVG Spec JSON

Los dominios están en el organigrama, no en el código: 19 de los 32 acoplamientos cruzan la frontera

Datos: parent · category · group · target · weight
Buena para: Comprobar si una organización declarada explica el acoplamiento real entre sus partes.
Evítala cuando: Cuando importa el sentido o el caudal de los vínculos: la curva de A a B y la de B a A son la misma.
Se lee bien: Entre 3 y 26 elementos; dibuja hasta 26
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é
`parent`	string	La rama (dominio, equipo, área) a la que pertenece el extremo de ORIGEN del vínculo. Es lo que da la jerarquía a lo largo de la cual se agrupan las curvas.
`category`	string	La hoja (módulo, entidad, persona) del extremo de ORIGEN. Una hoja sólo puede pertenecer a una rama: declarada en dos, la lectura falla nombrándola.
`group`	string	La rama del extremo de DESTINO. Se pide aparte porque una hoja puede aparecer sólo como destino y entonces no hay otro sitio del que sacar su rama.
`target`	string	La hoja del extremo de DESTINO. El SENTIDO no se dibuja: la curva de A a B y la de B a A son la misma línea, y el mismo par repetido aborta la lectura.
`weight` · opcional	number	Intensidad del vínculo (llamadas, imports, co-ocurrencias). OPCIONAL: sin ella todos pesan igual y el trazo sale uniforme, y la figura lo escribe en su nota.

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

¿Las hojas pertenecen a una jerarquía declarada?

Si no hay ramas, un grafo de red enseña los vínculos sin agruparlos.

Sí: quédate con enlaces agrupados jerárquicos

No: usa Grafo de red

¿Da igual el sentido del vínculo?

Si importa cuánto va de un grupo a otro, un diagrama de cuerdas dibuja el caudal entre grupos.

Sí: quédate con enlaces agrupados jerárquicos

No: usa Diagrama de cuerdas

¿Interesa el patrón y no cada par concreto?

Si hay que leer qué par está conectado y con qué peso, una matriz de adyacencia lo da celda a celda.

Sí: quédate con enlaces agrupados jerárquicos

No: usa Matriz de adyacencia

Código

La misma pieza, con tus datos

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

const spec = await getPreset('edgebundling');
spec.data.rows = misFilas; // parent, category, group, target
const { svg, warnings } = await renderComposition(spec);

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

Dudas

¿Qué cifra da?

Cuántos vínculos se quedan dentro de su rama y cuántos la cruzan.

¿Puede una hoja estar en dos ramas?

No: la lectura falla nombrándola. Tampoco se admite el mismo par repetido.

¿Es obligatorio el peso?

No. Sin él todos los vínculos pesan igual, el trazo sale uniforme y la figura lo escribe en su nota.

¿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 «cómo funciona algo»

Guía para elegir: cómo funciona algo →