D3 struggling with month axis

D3 struggling with month axis
0.0 0

#1

Hi,

I’m currently trying to complete my heat map with D3 but i’m struggling to make a y axis with 12 ticks for each month. At first i tried to use an ordinal scale but couldn’t get it to work. So i’ve sort of hacked it together using a linear scale but it won’t sit evenly, even after the number of ticks is adjusted.

Would really appreciate some help. One thing I’m really struggling with regarding D3 is the documentation seems to be very vague. Does anyone have link to some D3 guides/docs that really spell it out for dummies like me?

Thanks in advance :slight_smile:


#2

Hello Nathan,

Good working. I’ll give you one hint, and I believe you will fix it very easy.

If you note, you have domain range of 0.5 to 12.5 for yScale, but if you check your yAxisScale, it’s not the same range!

Try the easy solution comrade, let the yAxisScale take the same domain, so it’s [0.5,12.5] instead of the the two dates you gave,

Now for labeling the yAxis part, instead of expecting a data(where there is no date now), just simply print the given value as decimal value like d3.axisLeft(yAxisScale).tickFormat(d3.format("d")); (just like the x axis you did).

Now if you check the graph, it looks as expected, but 1,2,3… instead of Jan, Feb,… So I think this is the easy part you can do using a simple array, and a switch case.

Happy coding.


#3

Thankyou as always @NULL_dev!