zoom option

[mbostock]

This adds a top-level zoom option which can be set to true to enable panning and zooming (via d3-zoom). The option can also be set to xy to zoom both the x and y scales, x to only zoom the x scale, y to only zoom the y scale, or false (the default) or null to disable zooming.

Setting the zoom option is functionally equivalent to setting the domains of the x and y scales interactively; all marks that use position scales are affected, as well as any transforms or initializers that may depend on these scales. (See Julien Colot’s notebook for a userland example of this technique.)

The goal of this initial implementation is not optimal performance, but rather functional correctness. I make some effort at performance — for example, tracking which channels need to be rescaled when the x or y domains change, and only re-rendering the affected marks — but there is room for future improvement, especially if mark implementations can assist by updating the DOM directly rather than re-rendering and replacing.

I am also interested in exploring usability improvements to panning and zooming. I’d like keyboard shortcuts (when the plot is focused), such as + to zoom in, - to zoom out, and arrow keys ↑↓←→ to pan. I also want a reset button to zoom to the home view, but I don’t know yet where that button should live. We might also support one-dimensional zooming by clicking in the axes.

I’d also like programmatic zooming with zoom transitions (a plot.zoom method), and a configurable duration for zoom transitions (such as double-clicking to zoom in). Another possibility is a dedicated method for updating a scale’s domain and recomputing everything downstream, though at least for now I’m just interested in position scales (x and y).

TODO

• Basic panning and zooming
• Handle x or y scales not being defined
• Handle x or y scales not being zoomable
• Keyboard shortcuts
• Reset button
• Constrained zoom (either translate or scale)
• Handle mark initializers
• Handle mark transforms
• Handle faceted marks
• Handle conditional marks

Fixes #1590.

Previously #1738 #1964.

[mbostock]

Work in progress…

Screen.Recording.2024-06-13.at.1.43.29.PM.mov

Note that the axis ticks don’t change because I haven’t implemented re-running mark initializers yet.

[sk31park]

I'm rooting for your updates!
I can't wait to try it out :-)

[PBI-David]

How about using the escape key to reset the zoom? That way, everything can be controlled via keyboard shortcuts.