d3-axis for React
Using d3 to build charts in React is mostly a wonderful experience. But
it's hard to use d3-axis
with React: it internally uses d3's selection
system, so if you're creating your charts in React with JSX, you can't.
This is d3-axis
, but for React. As direct a port as you can get. You can
essentially read the API Reference
for d3-axis, and translate it directly to this component: for every d3-style
setter function, use a prop. The scale
argument that you provide to
the axis method is a scale
prop.
useEffect
or anyThis is the d3-axis-for-react
package on NPM, so:
$ yarn add d3-axis-for-react
# or
$ npm install d3-axis-for-react
Traditional d3 style:
d3.axisBottom(x)
.ticks(d3.timeMonth.every(3))
.tickFormat(d => d <= d3.timeYear(d) ? d.getFullYear() : null)
With d3-axis-for-react
<Axis
scale={x}
ticks={d3.timeMonth.every(3)}
tickFormat={d => d <= d3.timeYear(d) ? d.getFullYear() : null} />
Development supported by Earthrise Media. Adapted from d3-axis, written by Mike Bostock, licensed MIT.