In the meantime, something along those lines is working https://observablehq.com/d/223f34bca10702a3

FULL EDIT:

I noticed that in this example the zoom is reset at each rendering. This works in a notebook, but not really in a standalone page. In general I think this is not the best way to use d3.zoom. However this provided inspiration - thx for sharing 👍

After more exploration and getting other cues from this notebook and this comment, I could make it work properly in this notebook,

However in a standalone page, the zoom is misaligned on the x axis, but good on the y axis - and it's the same code !!! - unless typo... 👀
Is it obvious to an expert eye ?

EDIT 2:

I put this misaligned d3 zoom question on the forum, maybe a better place.

EDIT 3:

I got help from mcmcclur in the forum and after some more trials & reading the (very good) doc & watching youtube series "Introduction to Data Visualization in Observable Plot Course" (very useful) I have solved the zoom issue (see here) and can provide my opinion/feedback:

From my point of view, no need to "add zoom" to Plot, but rather improve doc about how to use d3.zoom with Plot, in particular warn user about problems induced by the figure wrapper and extra elements title, subtitle, legend, caption, and maybe try to make the Plot API a bit more systematic about these "exceptions". Finally provide an official notebook about the recommended way to use d3.zoom with Plot.

I cannot finish this much edited post with a sincere congrats to all the people making ObservableHQ and d3 !! It's fantastic 👏

EDIT 4:

For ref: I also managed an example of zooming with dual axis - even though translateExtent() values remain mysterious. d3.zoom would probably benefit from a few more official example notebooks.

EDIT 5:

I have added a use of d3.brush to control zoom in notebook @oscar6echo/plot-attempts-on-zoom - bit manual as the plot must be wrapped in an svg/g element, but works fine. I did not try adding animation with d3.transition. Not very clear to me so far.

Uh oh!

Panning and zooming #1590

Description

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions