Grid helpers

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.

Naming: H and V describe the lines a grid draws, X and Y name scales. gridHorizontal(yScale) draws horizontal lines from the y-scale's ticks; on the 2D grid, ticksH() sets the ticks of the horizontal lines (from scaleY()) and ticksV() those of the vertical lines (from scaleX()).

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	GridScale	d3 scale for the grid's x direction
scaleY	GridScale	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	GridScale	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	GridScale	d3 scale to initialize the grid

Example

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

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

GridScale : function

A d3 scale with a numeric range: continuous (scaleLinear, scaleTime, ...) or band (scaleBand, scalePoint). Band scales are recognised through bandwidth() and their lines are centred on the band.

Kind: global typedef

GridContext : Object

A d3 selection to render into, or a d3 transition on one. Given a transition, entering and exiting lines fade and slide between positions.

Kind: global typedef