Layouts

GraphoJS incluye varios layouts: GridLayout, TreeLayout, CircularLayout, ForceDirectedLayout, LayeredDigraphLayout y SpotLayout.

Edita el código y pulsa Run▶ Run↺ Reset

Usar un layout

diagram.layout = new go.GridLayout();
diagram.layoutDiagram();

Cambiar en runtime

Puedes asignar un layout nuevo y relanzar layoutDiagram() en cualquier momento (el ejemplo de arriba lo hace con __setLayout).

Nota sobre ForceDirected

ForceDirectedLayout aproxima la repulsión entre nodos con un árbol de Barnes-Hut (la misma técnica que D3-force y la mayoría de simuladores de n-cuerpos): cada iteración es O(n log n) en vez de O(n²), lo que permite usarlo con miles de nodos sin que el tiempo se dispare.

diagram.layout = new go.ForceDirectedLayout({
  maxIterations: 300,
  theta: 0.9, // por defecto — compromiso precisión/velocidad de la aproximación
});

theta controla ese compromiso: más bajo es más preciso pero más lento (theta: 0 desactiva la aproximación, calculando la repulsión exacta entre todos los pares); más alto es más rápido pero menos fiel al resultado exacto. El valor por defecto (0.9) funciona bien en la práctica.

LayeredDigraphLayout

Organiza un grafo dirigido en capas (estilo Sugiyama): cada nodo se asigna a una capa según su camino más largo desde las raíces, y dentro de cada capa el orden se reduce a base de minimizar cruces de enlaces con reduceCrossings: true (por defecto):

diagram.layout = new go.LayeredDigraphLayout({
  direction: 'vertical', // o 'horizontal'
  layerSpacing: 80,
  reduceCrossings: true,
});

La reducción de cruces usa la heurística de la mediana (Gansner et al., la misma que usa Graphviz/dot) en pasadas alternas hacia abajo y hacia arriba, seguida de una pasada de transposición que intercambia nodos adyacentes dentro de una capa siempre que eso reduzca el número real de cruces — más robusta frente a valores atípicos, y capaz de resolver casos que una única pasada de baricentro no puede.