d3-force-grid

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 simulation engine. It is also compatible with 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 ☕. Your contributions help keep open-source sustainable!

[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