d3-grid

D3 grid layout

Showing:

Popularity

Downloads/wk

0

GitHub Stars

79

Maintenance

Last Commit

8yrs ago

Contributors

0

Package

Dependencies

1

Size (min+gzip)

0.6KB

License

BSD-2-Clause

Type Definitions

Tree-Shakeable

No?

Categories

Readme

d3.layout.grid

A grid layout for D3. The grid layout takes a one-dimensional array of data and arranges it on a two-dimensional grid.

API

# d3.layout.grid()

Constructs a new grid layout.

# grid(nodes)

Computes the layout for nodes. Per default, the layout tries to keep the column and row number as equal as possible and uses point spacing. Two attributes are set on each node:

  • x – the computed x-coordinate of the node position.
  • y – the computed y-coordinate of the node position.

# grid.points()

Configure the grid to treat nodes as points, cf. d3.scale.ordinal().rangePoints().

# grid.bands()

Configure the grid to treat nodes as bands, cf. d3.scale.ordinal().rangeBands()

# grid.padding([padding])

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:

var grid = d3.layout.grid()
  .nodeSize([100, 100])
  .padding([20, 20]);

# grid.cols([num])

Fixes the layout to num columns or returns the number of columns (if it was set before).

# grid.rows([num])

Fixes the layout to num rows or returns the number of rows (if it was set before).

# grid.size([size])

If size is specified, sets the overall size of the layout as [x, y].

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 [x, y].

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.

Examples

Author

Jeremy Stucki, Interactive Things

License

BSD, see LICENSE.txt

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100