D3 scaleTime()坐标轴刻度与比例尺输出位置错位问题求解

使用d3.axisBottom()搭配d3.scaleTime()绘制X轴时，坐标轴刻度与比例尺计算输出的元素位置存在错位不对齐问题。
复现代码：

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

错位问题基本由以下三类原因导致，对应修复即可：

• D3轴默认半像素偏移
  D3轴生成器默认会给刻度线、刻度文本添加0.5px的位置偏移，这个设计是为了让1px宽度的轴线条在SVG抗锯齿渲染下更锐利。手动调用比例尺定位的元素没有添加这个偏移，就会出现半像素级错位。
  两种修复方式二选一：
  • 调用轴生成器时关闭默认偏移：const xAxis = d3.axisBottom(xScale).ticks(10).offset(0)
  • 给所有手动绘制、需要和X轴对齐的元素统一添加0.5px水平偏移，和轴的渲染逻辑对齐。
• 尺寸配置不统一
  复现代码中定义的画布宽度为300，但xScale的输出范围设置为[0, 600]，如果SVG根节点的width、viewBox属性没有和600的绘制宽度匹配，或者父分组没有设置对应缩放transform，坐标轴会被浏览器拉伸缩放，和比例尺直接计算的位置出现比例级错位。
  修复时统一所有尺寸配置：如果实际绘制宽度为600，就将SVG的width、viewBox宽度都设为600；如果画布可用宽度为300，就将xScale的range改为[0, width]即[0, 300]，保证比例尺输出范围、画布尺寸、视口配置完全一致。
• 全局CSS干扰
  检查是否给SVG或坐标轴分组设置了非默认的shape-rendering属性，或者全局CSS给SVG元素添加了padding、border、transform等会改变实际渲染位置的样式，这类属性会破坏坐标对齐逻辑。移除相关干扰样式即可。

内容的提问来源于stack exchange，提问作者Jay Wang