I'm trying to display a week's worth of data in an area chart, and would like to use scaleTime() to populate my x axis. I've converted the date strings to date objects, and the domain appears to be correct, but I can't get the x axis to display the format I want. What I would like to see are 7 tick marks with the day, month, and year displayed. Instead, I'm seeing the day of the week and the date, and there are additional tick marks displaying '12 PM', as in the attached picture.

I've tried specifying the number of tick marks, but then it gets even weirder, especially on month transitions, and might display something like 'Mon 29, Tues 30, Wed 31, November, Fri 2'.

Bottom line, am I missing something in how I'm implementing the scale, and if not, how might I go about fine-tuning the tick marks to only show what I want to see? The examples I've been able to find don't seem to run into the same problems I'm experiencing.

Current format of my date objects: "2020-07-22T06:00:00.000Z"

The code:

let x = d3.scaleTime().range([0, width-margin.right-margin.left])
let y = d3.scaleLinear().range([height-margin.bottom, margin.top])
x.domain([d3.min(area_data, d => d.date), d3.max(area_data, d=>d.date)])
y.domain([0, max_cases])
let xAxis = d3.axisBottom(x);
let yAxis = d3.axisLeft(y);

Thanks in advance.