I’m having a weird problem with my heat map. It looks great, except for the x-axis. It only marks the years from 1900 onward, leaving the preceding ticks with a strange “:00” text. I can’t, for the life of me, figure out what I’ve done wrong in this instance
Here’s a link to the project on Codepen (not a fan of Codepen, but there we are). Any feedback on my code would be greatly appreciated.
I’m far from a pro in d3 so I’ll just try to help you here, but don’t trust on me 100%.
It looks like you must give a tickFormat to your axisBottom. Then we think, why the last 6 years was appearing correctly? If you read here https://github.com/d3/d3-axis/blob/master/README.md#axisBottom, you’ll see that d3 gives a default tick size of 6.
Constructs a new bottom-oriented axis generator for the given scale, with empty tick arguments, a tick size of 6 and padding of 3. In this orientation, ticks are drawn below the horizontal domain path.
const xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%Y"))