Diagrama de arcos
Conexiones entre nodos ordenados en una línea.
Definición
Un diagrama de arcos alinea los nodos de una red sobre una sola línea y dibuja cada vínculo como un arco por encima. Como todos los nodos comparten la línea de base, los arcos que se apilan sobre un mismo nodo lo señalan como el nudo de la red. Sirve para listas de vínculos de tamaño moderado: colaboraciones, dependencias, referencias.
- Datos
- x · y · weight
- Buena para
- Ver qué nodos concentran los vínculos de una red pequeña o mediana.
- Evítala cuando
- Cuando la red tiene muchos vínculos: los arcos se superponen y la concentración deja de leerse.
- Se lee bien
- Entre 3 y 30 elementos; dibuja hasta 5000
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: resumen en texto · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
x · opcional | string | Nodo de salida del arco. Sin él (o sin el de llegada) no hay grafo: devuelve [] y cae a su demo. |
y · opcional | string | Nodo de llegada del arco. |
weight · opcional | number | El GROSOR del arco. Si no está, todos los vínculos valen 1 y el diagrama sólo dibuja la topología. |
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.
Cuándo usarla
Tres preguntas antes de elegirla
¿Hay pocos vínculos?
Si la red es densa, una matriz de adyacencia enseña cada par sin que nada se tape.
Sí: quédate con diagrama de arcos
No: usa Matriz de adyacencia
¿Importa más quién concentra vínculos que la forma de la red?
Si quieres ver grupos y puentes en dos dimensiones, un grafo de fuerzas los separa.
Sí: quédate con diagrama de arcos
No: usa Grafo de fuerzas
¿Los nodos forman una lista plana, sin grupos?
Si los nodos pertenecen a categorías y quieres ver los vínculos entre ellas, los enlaces agrupados jerárquicos los ordenan por rama.
Sí: quédate con diagrama de arcos
No: usa Enlaces agrupados jerárquicos
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('arcdiagram');
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
¿Qué significa el grosor del arco?
El peso del vínculo, si lo das. Sin columna de peso todos valen 1 y el diagrama solo dibuja quién se conecta con quién.
¿Importa la distancia entre nodos sobre la línea?
No. La lectura está en cuántos arcos se apilan sobre cada nodo, no en lo que separa a dos nodos.
¿Qué hace si faltan datos?
Dibuja el valor ausente como cero. Si un hueco no es un cero en tus datos, rellénalo o elimina la fila antes de dibujar.
¿Cómo se ve en el móvil?
El motor la recompone a 360 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «cómo funciona algo»
- Matriz de adyacenciaquién se conecta con quién en una red
Diagrama de pajaritacausas y consecuencias de un riesgo central
Columnas enfrentadascontrastar dos o más posturas
Rejilla con casilla vacíaver qué combinación falta
Diagrama de Ishikawacausas posibles de un problema por familias
Marco Cynefinclasificar problemas por su grado de complejidad