mbostock
commented
1 month ago Work in progress…
https://github.com/observablehq/plot/assets/230541/12b7cbc4-8772-4969-a425-1ebbcf161db0
Note that the axis ticks don’t change because I haven’t implemented re-running mark initializers yet.
sk31park
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
Fixes #1590.
Previously #1738 #1964.