grid

Grid

Reusable Grid component helper that renders either a vertical, horizontal or full grid, and that will usually be used inside charts. It could also be used as a standalone component to use on custom charts.

Requires: module:d3-scale

• Grid
  • .grid(scaleX, scaleY) ⇒ gridGenerator
  • .gridHorizontal(scale) ⇒ gridBaseGenerator
  • .gridVertical(scale) ⇒ gridBaseGenerator

Grid.grid(scaleX, scaleY) ⇒ gridGenerator

Constructor for a two-dimensional grid helper

Kind: static method of Grid

Param	Type	Description
scaleX	*	d3 scale for the grid's x direction
scaleY	*	d3 scale for the grid's y direction

Example

const grid = grid(xScale, yScale)
        .offsetStart(5)
        .hideEdges(true)
        .ticks(4);

    grid(svg.select('.grid-lines-group'));

Grid.gridHorizontal(scale) ⇒ gridBaseGenerator

Constructor for a horizontal grid helper

Kind: static method of Grid
Access: public

Param	Type	Description
scale	*	d3 scale to initialize the grid

Example

const grid = gridHorizontal(yScale)
        .range([0, chartWidth])
        .hideEdges('first')
        .ticks(yTicks);

    grid(svg.select('.grid-lines-group'));

Grid.gridVertical(scale) ⇒ gridBaseGenerator

Constructor for a vertical grid helper

Kind: static method of Grid
Access: public

Param	Type	Description
scale	*	d3 scale to initialize the grid

Example

const grid = gridVertical(xScale)
        .range([0, chartHeight])
        .hideEdges('first')
        .ticks(xTicks);

    grid(svg.select('.grid-lines-group'));