https://github.com/shauns/react-d3-axis

React-based Axis component for D3
https://github.com/shauns/react-d3-axis

chart d3 d3-axis d3-scale react

Last synced: 14 days ago
JSON representation

React-based Axis component for D3

• Host: GitHub
• URL: https://github.com/shauns/react-d3-axis
• Owner: shauns
• License: mit
• Created: 2017-01-24T13:21:42.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2021-05-26T16:18:37.000Z (over 3 years ago)
• Last Synced: 2024-11-11T18:53:05.426Z (about 1 month ago)
• Topics: chart, d3, d3-axis, d3-scale, react
• Language: JavaScript
• Size: 77.1 KB
• Stars: 26
• Watchers: 3
• Forks: 10
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-d3-axis

[![Build Status](https://travis-ci.org/shauns/react-d3-axis.svg?branch=master)](https://travis-ci.org/shauns/react-d3-axis)

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](https://github.com/d3/d3-axis) module into a React component and helper functions.

## Examples

```js

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

import {scaleLinear} from 'd3-scale';

const scale = scaleLinear().domain([0, 100]).range([0, 500]);

```

## 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 `` component from a tick-based D3 scale, such as `scaleLinear`.

### axisPropsFromBandedScale(scale)

Creates props for an `` component from a banded D3 scale, such as `scaleBand`.