Skip to content
React-based Axis component for D3
JavaScript
Branch: master
Clone or download
Latest commit 3676ea0 May 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
flow-typed/npm Initial commit Jan 24, 2017
src Rename export Jan 24, 2017
.babelrc Initial commit Jan 24, 2017
.editorconfig Initial commit Jan 24, 2017
.eslintignore Initial commit Jan 24, 2017
.eslintrc Initial commit Jan 24, 2017
.flowconfig Initial commit Jan 24, 2017
.gitignore Initial commit Jan 24, 2017
.npmignore Don't publish flow-typed folder Jan 24, 2017
.travis.yml login May 13, 2019
LICENSE Add MIT license Jan 24, 2017
README.md Update README.md Jan 24, 2017
package.json Upgrade tar May 13, 2019
yarn.lock Upgrade tar May 13, 2019

README.md

react-d3-axis

Build Status

React-based Axis component for D3

What is this?

D3v4's modular structure means you can pull in things like the scaling or colour logic, and leave out DOM functionality if you're using D3 in an environment that 'owns' the DOM -- such as React.

This is a port of the d3-axis module into a React component and helper functions.

Examples

import {Axis, axisPropsFromTickScale, LEFT} from 'react-d3-axis';
import {scaleLinear} from 'd3-scale';

const scale = scaleLinear().domain([0, 100]).range([0, 500]);
<Axis {...axisPropsFromTickScale(scale, 10)} style={{orient: LEFT}}/>

API

<Axis />

Renders an Axis in SVG (so it expects to be within an svg element).

values: Array<T>

The values corresponding to where the ticks on the axis will be made.

position: (d: T) => number

A function converting a tick value to an offset along the axis.

format: (d: T) => string

A function rendering a tick value to a string, for its label.

range: Array<number>

The numerical range of the rendered axis. So, if an axis runs 1000px wide, this would be [0, 1000].

style: AxisStyle

This is optional -- by default the axis is rendered with 'bottom' alignment (left-to-right, ticks below the line).

axisPropsFromTickScale(scale, tickCount)

Creates props for an <Axis /> component from a tick-based D3 scale, such as scaleLinear.

axisPropsFromBandedScale(scale)

Creates props for an <Axis /> component from a banded D3 scale, such as scaleBand.

You can’t perform that action at this time.