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
The Spacing Control
A simple spacing slider (1-10) controls how spread out nodes are:
Spacing Values
Force Behaviours
Manual Positioning
You can override the simulation by dragging nodes: