title: D3 scaleTime() axis tick misalignment
body: <p>I am drawing an x axis with <code>d3.axisBottom()</code> and <code>d3.scaleTime()</code>. However, the axis ticks are not aligned with the output from the scale.</p>
  <p>Example: see this <a href="https://observablehq.com/@xiaohk/time-scale-x-scale-misalignment" rel="nofollow noreferrer">observable notebook</a>.</p>
  <pre class="lang-js prettyprint-override"><code>const width = 300;
  const content = svg.append(&quot;g&quot;).attr(&quot;class&quot;, &quot;content&quot;);
  
  const xScale = d3.scaleTime().domain(dateExtent).range([0, 600]);
  const xAxis = d3.axisBottom(xScale).ticks(10);
  
  content
    .append(&quot;g&quot;)
    .attr(&quot;class&quot;, &quot;x-axis-group&quot;)
    .attr(&quot;transform&quot;, `translate(0, ${width - 35})`)
    .call(xAxis);
  
  content
    .selectAll(&quot;circle.temp-circle&quot;)
    .data(dateData)
    .join(&quot;circle&quot;)
    .attr(&quot;class&quot;, &quot;temp-circle&quot;)
    .attr(&quot;cx&quot;, (d) =&gt; xScale(d.date))
    .attr(&quot;cy&quot;, width - 45)
    .attr(&quot;r&quot;, 3)
    .style(&quot;fill&quot;, &quot;steelBlue&quot;);
  </code></pre>
  <p>Any suggestions are appreciated on how to resolve this?</p>