I am drawing an x axis with d3.axisBottom() and d3.scaleTime(). However, the axis ticks are not aligned with the output from the scale.

Example: see this observable notebook.

const width = 300;
const content = svg.append("g").attr("class", "content");

const xScale = d3.scaleTime().domain(dateExtent).range([0, 600]);
const xAxis = d3.axisBottom(xScale).ticks(10);

content
  .append("g")
  .attr("class", "x-axis-group")
  .attr("transform", `translate(0, ${width - 35})`)
  .call(xAxis);

content
  .selectAll("circle.temp-circle")
  .data(dateData)
  .join("circle")
  .attr("class", "temp-circle")
  .attr("cx", (d) => xScale(d.date))
  .attr("cy", width - 45)
  .attr("r", 3)
  .style("fill", "steelBlue");

Any suggestions are appreciated! Thanks!