d3.forceGrid

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

import d3ForceGrid from 'd3-force-grid';

or using a script tag

<script src="//cdn.jsdelivr.net/npm/d3-force-grid"></script>

then

d3.forceSimulation()
  .nodes(<myNodes>)
  .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!