Alternative: use d3 helper
The previous lessons taught us how to build React axis components that can be used in any of your charts.
However, there's an alternative worth mentioning: D3 can also draw axes. Let's explore this option and see which one works best for you.
The d3 axis module
D3 has a whole module dedicated to drawing axes! It is called ... d3-axis
It performs essentially the same function as the AxisBottom and AxisLeft components we created in the previous lesson: taking a scale and rendering lines and ticks based on it on the screen.
A few axes made with d3.js and its d3-axis module.
Did you say rendering?
We have a challenge: in a React environment where rendering is managed by React, how can we delegate part of the rendering process to D3?
This is possible using a react useEffect()!
Here is an example:
This axis is rendered using d3. The d3 necessary functions are called from a useEffect
Oh no! 😱
This lesson isn’t available just yet.
Take a look at the status badges next to each lesson in the sidebar to see when it’s coming out.
Thanks for your patience! 🙏