I’ve been tasked with fixing an issue in my company’s web application that involves SVG graphs generated using the D3 library. The issue is at hand is that the graphs display fine initially; however, when viewed using an iPad or other iOS device and the user zooms in on the graphs, they quickly become aliased/”fuzzy” – I’d like to prevent this loss of quality, if possible.
You can see examples of the issue here: normal graph, zoomed graph
I’ve never worked with SVG or D3 before, and I’m not sure if they provide any options for handling this sort of thing; if they do, I haven’t been able to find them in any of the documentation I’ve read.
I a feeling this may be the product of the iOS zooming method and they may not be anything I can do about it besides attempting to catch the zoom event and trigger the re-rending of the graph at the desired magnification level, although I’m not sure if that’s possible.
If anyone has some suggestions on how I could go about fixing this, I’d greatly appreciate the advice.
The default zoom behavior on iOS uses a fixed-resolution texture while zooming; this is known as hardware-accelerated zooming. Thus, if you take a small part of the page and zoom in using two fingers, the graphics may appear temporarily pixelated while zooming. This is true of any page, so many iOS users are likely accustomed to it.
The nice thing about SVG, being a vector graphics format, is that as soon as you release your fingers the browser will re-render the SVG at the new resolution.
If you want to maintain crisp resolution while zooming, you need to disable native hardware-accelerated zooming, and instead re-render the graph in response to touch events. You can use d3.behavior.zoom to add panning and zooming interaction to a visualization. However, note that depending on the complexity of the visualization, this may be slower than hardware-accelerated zooming.
Here’s an example that combines d3.behavior.zoom with d3.geo.path to demonstrate the technique: http://bl.ocks.org/2374239.