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

2D layout algorithms for visualizing hierarchical data.

d3-hierarchy

Many examples are shifting the viewbox to place 0,0 at the center of the frame. I use the vewbox for another reason and would lie to avoid that. Is there a way to give the simulation a specific origin point? Likewise, I struggle to influence how much of my frame the network spreads out across (My svg is large) - does the force simulation have some sort of bound or awareness of the size of the frame?

Dan DeLorenzo

Re: the first part of your question, you can use the *x* argument to d3.forceX to specify the x coordinate that attracts each node https://github.com/d3/d3-force#forceX; likewise with d3.forceY. Alternatively, you could draw the graph in a svg:g element that you can position with a transform: translate(x,y).
Bounding a force simulation s more difficult; you can try to play with the strength parameters of each force until it gives you something satisfying, or look at the various approaches experimented in https://github.com/d3/d3-force/pull/163 and https://observablehq.com/d/21d2053b3bc85bce

Any advice on how one might use a similar workflow (group > hierarchy), but achieve live modification and object constancy? As parent nodes in a groups hierarchy will not have any id that might have been a part of the flat data?

flare-2.json