Drag & Zoom (Canvas)


I was wondering if https://observablehq.com/@d3/drag-zoom would be feasible with canvas only.

See https://observablehq.com/d/5dd9d53be3c6738c. Would it be possible to add some condition to use d3.drag or d3.zoom depending on the position of the event?

Thanks for the ideas.

It should be. You’d need to implement drag.subject for Canvas, as shown here:

Per the d3-drag README, if the returned subject is null or undefined, no drag gesture is started. This means the d3-zoom behavior can then handle the event to initiate zooming.


Thanks. I will try this.

Meanwhile I made something related (what I wanted to do in reality) -> https://observablehq.com/@severo/drag-zoom-svg-rescaled

OK, I’ve been able to implement it with Canvas -> https://observablehq.com/@severo/drag-zoom-canvas

Thanks @mbostock for the help, and @Fil for your explanations (d3-drag and d3-zoom - Mystery Bug)