Super custom axis labels
While custom axis labels is a little tricky, here’s a sneaky way to replace the “bad” axis tick labels d3 uses with the “good” ones you want to use (whatever that might mean).
My data in this example is normal years - 1950
, 1951
, 1952
…all the way up to the 2000’s. But look at that axis!
You’re basically just taking what d3 wrote and saying “no no that’s all wrong, let me do it again for you.” The initial drawing by d3 and then your redrawing happens so fast you don’t see “1955”, only “Fities.”
Be sure to click Open example in new window to check all of the code out.
svg.selectAll(".x-axis text")
just means “give me all of thetext
elements inside of.x-axis
. It’s a shorter way of writingsvg.select(".x-axis").selectAll("text")
Note that d
in the last part isn’t your datapoint, it’s the actual value used to write the text. Also note that I used 1965
and not "1965"
- even though it’s a text
element, d3 is working with numbers, not text.