2

我的任务是解决我公司的 Web 应用程序中的一个问题,该问题涉及使用 D3 库生成的 SVG 图形。眼前的问题是图表最初显示得很好。但是,当使用 iPad 或其他 iOS 设备查看并且用户放大图表时,它们很快就会变得混叠/“模糊” - 如果可能的话,我想防止这种质量损失。

您可以在此处查看问题示例:normal graph , zoomed graph

我以前从未使用过 SVG 或 D3,我不确定它们是否提供任何选项来处理此类事情;如果他们这样做,我无法在我读过的任何文档中找到它们。

我感觉这可能是 iOS 缩放方法的产物,除了尝试捕捉缩放事件并以所需的放大倍率触发图形的重新渲染之外,它们可能无能为力,尽管我是不确定这是否可能。

如果有人对我如何解决此问题有一些建议,我将不胜感激。

4

1 回答 1

4

iOS 上的默认缩放行为在缩放时使用固定分辨率的纹理;这称为硬件加速缩放。因此,如果您取页面的一小部分并使用两根手指放大,则图形可能会在缩放时出现暂时像素化。任何页面都是如此,因此许多 iOS 用户可能已经习惯了。

SVG 作为矢量图形格式的好处在于,只要您松开手指,浏览器就会以新的分辨率重新渲染 SVG。

如果您想在缩放时保持清晰的分辨率,则需要禁用本机硬件加速缩放,而是重新渲染图形以响应触摸事件。您可以使用 d3.behavior.zoom 向可视化添加平移和缩放交互。但是,请注意,根据可视化的复杂性,这可能比硬件加速缩放要慢。

这是一个结合 d3.behavior.zoom 和 d3.geo.path 来演示该技术的示例:http: //bl.ocks.org/2374239

于 2012-04-13T06:10:14.310 回答