D3.js：缩放 svg 时错过刻度线

D3.js: miss tick lines when zooming the svg

受 Zoomable Area created by mbostock 启发，我在刻度线上遇到了一个让我困惑的问题。我使用 Chrome V41 作为渲染浏览器。

当缩放页面小于 110% 时，一些 y 轴刻度线被遗漏。那是浏览器的问题吗？谁能告诉我为什么以及如何解决它？

谢谢。

这是由 svg 的渲染引起的，这取决于浏览器。

线条位于不直接位于像素上的点上（它们是浮点数而不是整数）。此外，线条的宽度设置为 .5px。这两个事实导致了奇数条件下缺失行的影响。

一个简单的解决方法是将线条的宽度增加到 1px。

另一个修复方法是将刻度的 shape-rendering 设置为可能 geometricPrecision。