A curated compilation of plugins and all-things related to d3-force.
| Plugin | Description | Code | Examples |
|---|---|---|---|
| d3.bboxCollide | Repelling force that prevents rectangular nodes from overlapping with each other. Great for avoiding label overlaps. | d3-bboxCollide | |
| d3.forceAttract | Spring-like force to attract nodes to a particular <x,y> point. | d3-force-attract | |
| d3.forceBounce | Elastic collision force between nodes. Useful to simulate natural collisions between circular objects that conserve energy and momentum. | d3-force-bounce | |
| d3.forceCenter | Translate all nodes as a group towards the center of the canvas. Manipulates nodes coordinates directly, instead of their velocity. | d3-force (core) | |
| d3.forceCluster | Spring-like force to attract nodes towards a set of cluster focus points. | d3-force-cluster | |
| d3.forceCollide | Repelling force that prevents circular nodes from overlapping with each other. | d3-force (core) | |
| d3.forceContainer | Constrain nodes to a bounding box. | d3-force-container | |
| d3.forceLink | Spring-like attraction/repulsion force applied to node-pairs. | d3-force (core) | |
| d3.forceMagnetic | Inverse-square (distance) attraction/repulsion force applied to all nodes or dedicated node-pair edges. Useful to simulate natural occurring forces such as gravity or electrostatic. | d3-force-magnetic | |
| d3.forceManyBody | Inverse-linear (distance) attraction/repulsion force applied to all nodes. Typically used as node repulsion in force-directed graphs for a distributed spread. | d3-force (core) | |
| d3.forceSurface | Bounce nodes off one or more line-segments. Surface contact triggers an elastic collision against the surface angle. | d3-force-surface | |
| d3.forceX | Horizontal spring-like attraction force. | d3-force (core) | |
| d3.forceY | Vertical spring-like attraction force. | d3-force (core) | |
| d3.forceZ | Spring-like attraction force in the Z dimension for 3D representations. | d3-force-3d | - |
| Name | Description | Code | Example |
|---|---|---|---|
| d3-force-3d | Extended version of d3-force to run simulations in 3D or 1D. | d3-force-3d | |
| d3.forceEdgeBundling | Force-directed edge bundling algorithm. Self-organise edges on thick mesh graphs to decrease visual clutter. | d3.forceBundle |
Please get in touch for any additions/corrections to this list. And as always, use the force!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent