Class pv.Layout.Grid
Extends
pv.Layout.
Implements a grid layout with regularly-sized rows and columns. The
number of rows and columns are determined from their respective
properties. For example, the 2×3 array:
1 2 3 4 5 6can be represented using the rows property as:
[[1, 2, 3], [4, 5, 6]]If your data is in column-major order, you can equivalently use the columns property. If the rows property is an array, it takes priority over the columns property. The data is implicitly transposed, as if the pv.transpose operator were applied.
This layout exports a single cell mark prototype, which is intended to be used with a bar, panel, layout, or subclass thereof. The data property of the cell prototype is defined as the elements in the array. For example, if the array is a two-dimensional array of values in the range [0,1], a simple heatmap can be generated as:
vis.add(pv.Layout.Grid) .rows(arrays) .cell.add(pv.Bar) .fillStyle(pv.ramp("white", "black"))The grid subdivides the full width and height of the parent panel into equal rectangles. Note, however, that for large, interactive, or animated heatmaps, you may see significantly better performance through dynamic pv.Image generation.
For irregular grids using value-based spatial partitioning, see {@link
pv.Layout.Treemap}.
Defined in: Grid.js.
Constructor Attributes | Constructor Name and Description |
---|---|
Constructs a new, empty grid layout.
|
Field Attributes | Field Name and Description |
---|---|
The cell prototype.
|
|
The number of columns.
|
|
Default properties for grid layouts.
|
|
The number of rows.
|
- Fields borrowed from class pv.Panel:
- canvas, children, overflow, transform
- Fields borrowed from class pv.Bar:
- fillStyle, height, lineWidth, strokeStyle, width
- Fields borrowed from class pv.Mark:
- bottom, childIndex, cursor, data, events, index, left, parent, proto, reverse, right, root, scale, title, top, type, visible
- Methods borrowed from class pv.Panel:
- add, anchor
- Methods borrowed from class pv.Mark:
- anchorTarget, def, event, extend, margin, mouse, render
Class Detail
pv.Layout.Grid()
Constructs a new, empty grid layout. Layouts are not typically constructed
directly; instead, they are added to an existing panel via
pv.Mark#add.
Field Detail
{pv.Mark}
cell
The cell prototype. This prototype is intended to be used with a bar,
panel, or layout (or subclass thereof) to render the grid cells.
{number}
cols
The number of columns. This property can also be specified as the data in
column-major order; in this case, the cols property is implicitly set to the
length of the array, and the rows property is set to the length of the first
element in the array.
{pv.Layout.Grid}
defaults
Default properties for grid layouts. By default, there is one row and one
column, and the data is the propagated to the child cell.
{number}
rows
The number of rows. This property can also be specified as the data in
row-major order; in this case, the rows property is implicitly set to the
length of the array, and the cols property is set to the length of the first
element in the array.