Force Simulation
Understand how D3 force simulation positions nodes automatically. Control spacing, link strength, and layout behaviour.
Graph diagrams use D3.js force simulation to automatically position nodes. Forces push and pull nodes until they reach a balanced layout. Understanding these forces helps you create clear, readable diagrams.
Try It: Interactive Example
Explore this diagram to see force simulation in action. Drag the Central Hub (red) node and watch how connected nodes follow. The green service nodes cluster around the hub due to link forces. Notice how the isolated nodes (purple) stay separate, pushed away by charge forces. The orange cluster demonstrates how connected subgraphs form their own groups.
How Force Simulation Works
The simulation applies multiple forces to each node:
Simulation Parameters
| Parameter | Default | Description |
|---|---|---|
| Link Strength | 0.5 | How strongly connected nodes pull together |
| Link Distance | 150px | Ideal distance between connected nodes |
| Charge Strength | -300 | Repulsion force (negative = repel) |
| Collision Padding | 10px | Minimum space between nodes |
| Collision Strength | 0.8 | How firmly collision is enforced |
| Alpha Decay | 0.02 | Cooling rate (how fast simulation stops) |
| Velocity Decay | 0.4 | Friction (how fast nodes slow down) |
The Spacing Control
A simple spacing slider (1-10) controls how spread out nodes are:
Spacing Values
| Spacing | Charge | Description |
|---|---|---|
| 1 | -50 | Tight |
| 3 | -200 | Compact |
| 5 | -800 | Default |
| 7 | -3200 | Spread |
| 10 | -25600 | Very spread |
Force Behaviours
Manual Positioning
You can override the simulation by dragging nodes: