score:2

Accepted answer

Your x-axis is of type scaleBand, and ticks() doesn't work on banded axes. From the documentation:

This method has no effect if the scale does not implement scale.ticks, as with band and point scales

You can however explicitly set the values with tickValues(), so you can try filtering the domain down to five values and setting manually. This may get you in the right direction:

let tickInterval = 5;
let tickValues = data.map(function(d) { return d.date; }).filter(function(d, i) { return i % tickInterval === 0 });
let xAxisLower = d3.axisBottom(x)
    .tickFormat(d3.timeFormat("%m-%d"))
    .tickValues(tickValues)
    .tickPadding(15);

You might need to tweak tickInterval to fit the length of your data, but that should be a start.


Related Query

More Query from same tag