Grafo de fuerzas
Red de nodos que se ordena por atracción.
Definición
Un grafo de fuerzas dibuja nodos unidos por aristas y deja que se coloquen solos, atrayéndose los conectados. Se lee siguiendo las conexiones: quién está unido con quién y qué nodos concentran enlaces. Se usa para redes de personas, sistemas o dependencias.
- Datos
- source · target · weight
- Buena para
- Enseñar quién está conectado con quién en una red pequeña o mediana.
- Evítala cuando
- Cuando quieres leer la distancia entre nodos o su posición como agrupación: la colocación no mide nada.
- Se lee bien
- Entre 3 y 50 elementos; dibuja hasta 1500
- Datos que faltan
- Se niega a dibujar y dice qué valor falta.
- Accesibilidad
- Lector de pantalla: resumen en texto · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
source · opcional | string | Extremo de salida de la arista. Sin él (ni `target`) la pieza devuelve un grafo vacío. |
target · opcional | string | Extremo de llegada. Los nodos NO se declaran aparte: salen de los valores distintos de estas dos columnas, en orden de aparición. |
weight · opcional | number | Opcional: peso de la arista. Sin la COLUMNA vale 1 para todas —el ejemplo no la trae a propósito (data.ts:100)— pero si la columna está, cada fila tiene que traer su número: una celda vacía se leía como 1 y un 0 legítimo también. |
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
¿Basta con ver quién se conecta con quién?
Si la posición tiene que significar algo, un diagrama de arcos alinea los nodos en un orden declarado.
Sí: quédate con grafo de fuerzas
No: usa Diagrama de arcos
¿La red tiene pocas conexiones?
Si la red es densa, una matriz de adyacencia evita la maraña de líneas.
Sí: quédate con grafo de fuerzas
No: usa Matriz de adyacencia
¿Las aristas son relaciones y no caudales que se reparten?
Si lo que entra en cada nodo sale de él hacia otros, un Sankey enseña el reparto del caudal.
Sí: quédate con grafo de fuerzas
No: usa Diagrama de Sankey
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('forcegraph');
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
¿Puedo leer la distancia entre dos nodos?
No. La posición sale del cálculo de atracción y no mide distancia ni agrupación; solo las aristas son dato.
¿Cómo declaro los nodos?
No se declaran aparte: salen de los nombres que aparecen como origen y destino de las aristas.
¿Las aristas pueden tener peso?
Sí, con una columna de peso. Si no la traes, todas valen 1; si la traes, cada fila tiene que llevar su número.
¿Qué hace si faltan datos?
Se niega a dibujar y dice qué valor falta.
¿Cómo se ve en el móvil?
El motor la recompone a 420 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 arcosconexiones entre nodos ordenados en una línea
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