https://github.com/vasturiano/d3-force-grid
A force to snap nodes to a grid for the d3-force simulation engine
https://github.com/vasturiano/d3-force-grid
d3-force force force-directed-graphs force-simulation graph grid-layout node snap-to-grid
Last synced: 3 months ago
JSON representation
A force to snap nodes to a grid for the d3-force simulation engine
- Host: GitHub
- URL: https://github.com/vasturiano/d3-force-grid
- Owner: vasturiano
- License: mit
- Created: 2025-06-09T13:38:42.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-06-09T15:40:18.000Z (about 1 year ago)
- Last Synced: 2025-10-29T11:55:46.312Z (7 months ago)
- Topics: d3-force, force, force-directed-graphs, force-simulation, graph, grid-layout, node, snap-to-grid
- Language: JavaScript
- Homepage: https://vasturiano.github.io/d3-force-grid/example/
- Size: 34.2 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
d3.forceGrid
==================
[![NPM package][npm-img]][npm-url]
[![Build Size][build-size-img]][build-size-url]
[![NPM Downloads][npm-downloads-img]][npm-downloads-url]
A force that pulls nodes to a grid system with customizable steps. Each of the node's dimensions is pulled towards the closest grid line with a spring-like force whose intensity increases linearly with distance.
This force plugin is designed to be used with the [d3-force](https://github.com/d3/d3-force) simulation engine. It is also compatible with [d3-force-3d](https://github.com/vasturiano/d3-force-3d) and can function in a one, two (default) or three-dimensional space.
## Quick start
```js
import d3ForceGrid from 'd3-force-grid';
```
or using a *script* tag
```html
```
then
```js
d3.forceSimulation()
.nodes()
.force('grid', d3.forceGrid()
.step(15)
);
```
## API reference
| Method | Description | Default |
|----------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------:|
| step([num]) | Sets or gets the grid step, symmetrically across all dimensions. | 10 |
| stepX([num]) | Sets or gets the grid step just along the X dimension. | 10 |
| stepY([num]) | Sets or gets the grid step just along the Y dimension. | 10 |
| stepZ([num]) | Sets or gets the grid step just along the Z dimension (for 3D graphs). | 10 |
| strength([num]) | Sets or gets the force strength. This defines how strong is the snapping attraction to the grid. A strength of `1` applies full force; `0` disables it. | 0.3 |
| considerAlpha([num]) | Sets or gets whether the force intensity should decrease or not as alpha decays and the simulation cools down. | `false` |
## ❤️ Support This Project
If you find this module useful and would like to support its development, you can [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8¤cy_code=USD&source=url). Your contributions help keep open-source sustainable!
[](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8¤cy_code=USD&source=url)
[npm-img]: https://img.shields.io/npm/v/d3-force-grid
[npm-url]: https://npmjs.org/package/d3-force-grid
[build-size-img]: https://img.shields.io/bundlephobia/minzip/d3-force-grid
[build-size-url]: https://bundlephobia.com/result?p=d3-force-grid
[npm-downloads-img]: https://img.shields.io/npm/dt/d3-force-grid
[npm-downloads-url]: https://www.npmtrends.com/d3-force-grid