I have a d3 graph with an SVG enabled with
d3-zoom. Simply put, I have configured zoom to allow the user to pan (and only pan) on the x axis (and only the x axis):
const zoom = d3.zoom() .scaleExtent([1, 1]) // scale 1x to 1x (no zooming) .translateExtent([[ xExtent, 0 ], [ // Bottom right extent: [center of last age, graph height] rightExtent, graphHeight ]]) .on('zoom', this.zoom) .on('start', this.zoomStart) .on('end', this.zoomEnd) svg.call(zoom) .on('wheel.zoom', null);
This has worked so far and allows the user to pan around the X-axis on both mobile and desktop devices.
The problem is, on iOS and Android, when touching the graph to scroll down on the page, the page remains in place – the scroll events are somehow being intercepted by
I have looked all over the d3-zoom docs and have not found anything except this statement:
"If the user tries to zoom by wheeling when already at the corresponding limit of the scale extent, the wheel events will be ignored and not initiate a zoom gesture. This allows the user to scroll down past a zoomable area after zooming in, or to scroll up after zooming out.". My problem is that I am still having an issue on mobile devices scrolling past the graph.
I have also scoured SO and discovered this question, with a partial answer that is incomplete to what I need: D3 disable pan & zoom when scrolling
How can I use zoom on my SVG while also being able to scroll on mobile devices? If needed I am willing to completely disable “vertical” panning on the SVG if that is possible with d3, I just need to be able to scroll the page while also panning to the right and left on the X axis.