D3中坐标轴与SVG的viewbox未对齐偏移0.5是什么原因？

问题原因 #

这个0.5单位偏移是D3坐标轴组件的默认设计：

• 常规无缩放的SVG场景下，1px宽的线条如果对齐整像素坐标，渲染时会占满相邻两个像素的一半，出现模糊虚边。D3默认给坐标轴添加0.5偏移，配合shape-rendering: crispEdges属性，就能让线条刚好落在物理像素网格中间，得到锐利的显示效果。
• 你的场景使用了数值极小的viewBox，SVG整体被放大数十倍渲染，默认的0.5偏移被等比放大后就变成了明显的错位；同时你设置的坐标轴描边宽度仅为0.1，完全不需要默认的像素对齐优化，反而会导致渲染异常。

解决方案 #

做两处修改即可解决偏移问题：

1. 给X、Y轴配置添加.offset(0)，关掉D3默认的半像素偏移：

const axisY = d3.axisLeft(scaleY).tickSize(0.2).tickPadding(0.1*margin).offset(0)
const axisX = d3.axisBottom(scaleX).tickSize(0.2).tickPadding(0.1*margin).offset(0)

2. 删除CSS中.axis path, .axis line规则下的shape-rendering: crispEdges配置，避免浏览器强制对齐物理像素引入额外偏移。

修改后坐标轴就会对齐到你预期的坐标位置，不会再出现0.5的错位。

内容的提问来源于stack exchange，提问作者Will Thames