Learn D3.js

Creating a force-directed network diagram

The d3-force module contains most of the API you will need to create force-directed diagrams. It's included in the default bundle, which already provides all required dependencies.

To create a new force simulation you need to provide the d3.forceSimulation() function with an array of nodes (containing any objects, even empty ones, but not plain strings). Several positioning properties will be added to each node. Once you create a simulation it starts immediately, but nothing will happen unless you initialize it with one or more force algorithms. If you wish to animate the simulation, you should also register a handler for tick events. These tasks are performed by the methods listed as follows: