score:10

Accepted answer

The key is this line:

let xAxis = axisBottom().scale(x).ticks(6);

Try changing like so:

let xAxis = axisBottom(x).ticks(6);

For a full working example see - jsFiddle

EDIT

Improved the above js fiddle to include formatting.

Snippet from jsFiddle below:

let x = d3
  .scaleTime()
  .range([0, totalWidth])
  .domain(d3.extent(data));

let xAxis = d3
  .axisBottom(x)
  .ticks(d3.timeDay, 1)
  .tickFormat(d3.timeFormat("%a %d"));

Related Query