Estoy dibujando un eje x con d3.axisBottom() y d3.scaleTime() . Sin embargo, las marcas del eje no están alineadas con la salida de la escala.

Ejemplo: ver este cuaderno observable .

 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");

¡Cualquier sugerencia es apreciada! ¡Gracias!