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 is not ready yet.
But we're working hard on it, releasing 1-2 lessons per week. If you're a student, check the discord channel for announcements! (
logo above. )
🙇