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

Question

我有一个问题困惑我的蜱线,灵感来自mbostock创建的Zoomable 区域.我正在使用Chrome V41作为渲染浏览器.

当缩放页面小于110%时,会遗漏一些y轴刻度线.这是浏览器的问题吗？任何人都可以告诉我为什么以及如何解决它？

谢谢.

Answer 1

这是由svg的渲染引起的,这取决于浏览器.

这些线位于不直接在像素上的点上(它们是浮点而不是int).此外,线条的宽度设置为.5px.这两个事实导致奇数条件下缺失线的影响.

一个简单的解决方法是只增加线条的宽度1px.

另一种解决方法是shape-rendering将刻度设置为可能geometricPrecision.