https://github.com/finnfiddle/d3-v4-grid
Grid layout for D3 v4
https://github.com/finnfiddle/d3-v4-grid
d3 d3js d3v4 javascript visualisation visualization
Last synced: over 1 year ago
JSON representation
Grid layout for D3 v4
- Host: GitHub
- URL: https://github.com/finnfiddle/d3-v4-grid
- Owner: finnfiddle
- Created: 2017-05-23T20:10:38.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-21T19:46:25.000Z (almost 9 years ago)
- Last Synced: 2024-10-11T11:17:44.230Z (over 1 year ago)
- Topics: d3, d3js, d3v4, javascript, visualisation, visualization
- Size: 8.79 KB
- Stars: 3
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# D3 v4 Grid Layout
A grid layout for [D3](http://d3js.org) forked from [https://github.com/interactivethings/d3-grid](https://github.com/interactivethings/d3-grid) and updated to use D3 v4. The grid layout takes a one-dimensional array of data and arranges it on a two-dimensional grid.
## Installation
```
npm i d3-v4-grid
```
## Example
```javascript
import Grid from 'd3-v4-grid';
const grid = Grid() // create new grid layout
.data([ // input an array of data
{ foo: 'bar' },
{ foo: 'bar' },
{ foo: 'bar' },
{ foo: 'bar' },
])
.bands(true) // use bands not points
.size([400, 200]); // set size of container
// recompute the node positions
grid.layout();
console.log(grid.nodes());
// [
// { foo: 'bar', x: 0, y: 0 },
// { foo: 'bar', x: 200, y: 0 },
// { foo: 'bar', x: 0, y: 100 },
// { foo: 'bar', x: 200, y: 100 },
// ]
console.log(grid.nodeSize());
// [200, 100]
console.log(grid.cols());
// 2
console.log(grid.rows());
// 2
```
## API
### Grid()
Constructs a new grid layout.
### grid.size([size])
If size is specified, sets the overall size of the layout as [width, height].
If size is set, returns the current size. Default size is 1×1.
If instead nodeSize is set, returns the actual size of the layout after grid has been called.
### grid.nodeSize([nodeSize])
If nodeSize is specified, sets the size of an individual node as [width, height].
If nodeSize is set, returns the current nodeSize.
If instead size is set, returns the actual size of a node after grid has been called.
### grid.rows([num])
Fixes the layout to num rows or returns the number of rows (if it was set before).
### grid.cols([num])
Fixes the layout to num columns or returns the number of columns (if it was set before).
### grid.bands([useBands])
Configure the grid to treat nodes either as bands or points (default).
If `useBands` is set to `true` then the layout will use `d3.scaleBand()` to calculate positions. If it is set to false (default) then it will use `d3.scalePoint()`.
### grid.padding([x, y])
Specify the padding between the node bands as [x, y]. x and y are relative to the band width/height, similar to the padding parameter of d3.scale.ordinal().rangeBands().
If nodeSize is set, padding is absolute. For example, to configure a grid layout for nodes with 100×100px size, and 20px horizontal and vertical padding, use:
```javascript
var grid = Grid()
.nodeSize([100, 100])
.padding([20, 20]);
```
### grid.data([data])
If data is set it sets the input data array for the layout. If not set then it returns the current data array.
### grid.layout()
Triggers the layout to recalculate the node positions.
### grid.nodes()
Returns the original input data array with positions `x` and `y` values added to each item.
## License
MIT