Layouts
16 built-in layout algorithms for positioning graph nodes in 2D and 3D space. Set via the layoutType prop on GraphCanvas.
Layout Types
Force-Directed
| Type | Description |
|---|
'forceDirected2d' | D3 force simulation in 2D (default) |
'forceDirected3d' | D3 force simulation in 3D |
'nooverlap' | Force-directed with no-overlap constraint |
'forceatlas2' | ForceAtlas2 algorithm (good for large graphs) |
Tree
| Type | Description |
|---|
'treeTd2d' | Tree top-down, 2D |
'treeTd3d' | Tree top-down, 3D |
'treeLr2d' | Tree left-right, 2D |
'treeLr3d' | Tree left-right, 3D |
Radial
| Type | Description |
|---|
'radialOut2d' | Radial outward, 2D |
'radialOut3d' | Radial outward, 3D |
Circular / Concentric
| Type | Description |
|---|
'circular2d' | Nodes arranged in a circle |
'concentric2d' | Concentric rings, 2D |
'concentric3d' | Concentric rings, 3D |
Hierarchical
| Type | Description |
|---|
'hierarchicalTd' | Hierarchical top-down |
'hierarchicalLr' | Hierarchical left-right |
Custom
| Type | Description |
|---|
'custom' | Provide your own layout via layoutOverrides |
Basic Usage
<GraphCanvas
nodes={nodes}
edges={edges}
layoutType="forceDirected2d"
/>
3D Layout
<GraphCanvas
nodes={nodes}
edges={edges}
layoutType="forceDirected3d"
cameraMode="orbit"
/>
Tree Layout
<GraphCanvas
nodes={nodes}
edges={edges}
layoutType="treeTd2d"
/>
Layout Overrides
Fine-tune layout parameters with layoutOverrides:
// Force-directed tuning
<GraphCanvas
layoutType="forceDirected2d"
layoutOverrides={{
nodeStrength: -500,
linkDistance: 100,
nodeLevelRatio: 5,
}}
/>
// Circular radius
<GraphCanvas
layoutType="circular2d"
layoutOverrides={{ radius: 500 }}
/>
// No-overlap
<GraphCanvas
layoutType="nooverlap"
layoutOverrides={{
margin: 20,
maxIterations: 100,
ratio: 10,
gridSize: 20,
}}
/>
// ForceAtlas2
<GraphCanvas
layoutType="forceatlas2"
layoutOverrides={{
scalingRatio: 100,
gravity: 10,
iterations: 50,
}}
/>
Fixed Node Positions
Pin specific nodes to fixed coordinates:
const nodes = [
{ id: '1', label: 'Fixed', fx: 0, fy: 0, fz: 0 },
{ id: '2', label: 'Free' },
];
Default Layout Parameters
Force-Directed (2D/3D)
| Parameter | Default | Description |
|---|
nodeLevelRatio | 2 | Node separation factor |
nodeStrength | -250 | Repulsion strength (negative = repel) |
Tree Layouts
| Parameter | Default | Description |
|---|
nodeLevelRatio | 5 | Level separation |
nodeStrength | -250 (2D) / -500 (3D) | Repulsion |
linkDistance | 50 | Edge length |
Radial Layouts
| Parameter | Default | Description |
|---|
nodeLevelRatio | 5 (2D) / 2 (3D) | Ring separation |
nodeStrength | -500 | Repulsion |
linkDistance | 100 | Edge length |
Circular
| Parameter | Default | Description |
|---|
radius | 300 | Circle radius |
No-Overlap
| Parameter | Default | Description |
|---|
margin | 10 | Min node margin |
maxIterations | 50 | Max layout iterations |
ratio | 10 | Overlap ratio |
gridSize | 20 | Grid cell size |
ForceAtlas2
| Parameter | Default | Description |
|---|
scalingRatio | 100 | Force scaling |
gravity | 10 | Gravity toward center |
iterations | 50 | Simulation steps |
Notes
- 3D layouts (
*3d suffix) require cameraMode="orbit" for proper navigation - Force-directed layouts run asynchronously;
animated={true} shows the simulation settling - Tree/hierarchical layouts work best with DAG (directed acyclic graph) data
'custom' layout type expects you to provide node positions via fx/fy/fz on each node- Cluster-aware layouts group nodes by
clusterAttribute when set