Changing the Number of Ticks on an Axis
Learn to change the number of ticks on the axes of your graph.
We'll cover the following...
Now we shall address the other problem that cropped up when we changed the size of the text. We have overlapping values on the x-axis.
Overlapping axis values
If I was to be brutally honest, I think that there are too many values (ticks) on the graph. The format of the values (especially on the x-axis) is too wide, and this type of overlap was bound to happen eventually. Good news; D3 has got us covered.
The axis component
The axis component includes a function to specify the number of ticks on an axis. All we need to do is add in the function and the number of ticks like:
Press + to interact
// Add the X Axissvg.append("g").attr("class", "axis").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x).ticks(5));
With the end result looking like this:
Nicely spaced axis values
...