Force-directed graph layout using velocity Verlet integration.

Static force-directed graph

Force-directed web worker

Force-directed graph, canvas

Disjoint force-directed graph

Force-directed graph

Mike Bostock

Collision detection

forceCenter.strength

simulation.tick

Force-directed lattice

Collision Detection

Temporal force-directed graph

Sticky Force Layout

Force layout phyllotaxis arrangement

Mobile patent suits

Clustered Bubbles

Build Your Own Graph!

Modifying a Force-Directed Graph

Force-directed tree

Force-directed graph component

D3 Documentation

d3-force

Gallery

Wonderful! I wonder now how to make the nodes enter or exit the field from a constrained point around the circle to seek pending future relationships with some distribution of velocity.

Jono

Thanks. That’s basically how it works. The entering nodes are assigned phyllotaxis positions around the origin since their initial x and y properties are undefined.

https://github.com/d3/d3-force/blob/194dba9ed932670f2110c553da6b47a9069ea649/src/simulation.js#L66-L70

You can initialize the positions strictly to the center by replacing || {} with || {x: 0, y: 0}, but this doesn’t have much of an effect since when nodes are close the manyBody repulsive force is strongest, causing the nodes to fly apart at a rapid velocity. Finding an existing connected node by scanning the links array would probably be the most stable initial position.

Perhaps you could write a custom force that constrains the maximum speed of nodes? Like so: https://observablehq.com/d/1849551f209b16ed

sfhh@4.json

Purpose-built for displays of data