d3.timeDay.every(step) resets each month, causing colliding axis labels
<p>I am creating a chart that has daily data for some number of sequential days. Each object in the data array has a date property, which is that day's JavaScript Date representation at midnight. Here is the relevant code:</p>

<pre><code>  const x = d3.scaleTime()
    .range([0, width])
    .domain(d3.extent(data.map(d =&gt; d.date)));

  const days = data.length;
  let interval = 1;
  while (width / (days - 1) * interval &lt; 60) {
    interval += 1;
  }

  const xAxis = d3.axisBottom(x)
    .tickFormat(d3.timeFormat('%b %d'))
    .ticks(d3.timeDay.every(interval));
</code></pre>

<p>The problem is that d3.timeDay.every(interval) resets at the start of each month. The d3 docs clearly point this out, so it is not a bug.</p>

<p>Unfortunately, it leads to ticks and labels that are too close together when dates cross month boundaries.</p>

<p>Is there a way to make the X axis (which is a scaleTime) create ticks every interval days regardless of month boundaries?</p>