A simple zoom slider

[kgish]

I’ve created a force directed graph which I can manipulate using various sliders.

I would also like to use a slider with zoom levels to trigger zooming in and out, centered in the middle of the svg rectangle.

The default zoom works fine, but I would like to disable all event handling like mouse wheel, double click, etc and only a zoom slider can be used.

However, pan should still be allowed.

What’s the best way to do this?

[MarioDelgadoSr]

• Here’s one approach: Programmatic Zoom / Mario Delgado | Observable
• Adopted from @mbostock’s Programmatic Zoom / D3 | Observable

[kgish]

Nice, thanks!

[kgish]

How can I download the original example code?

[mootari]

@kgish You can view each notebook cell’s code by clicking into the left-hand side.

Alternatively you can enable “Safe mode” where only the code is visible. Go to the notebook menu in the top right, then select “View” > “Enable safe mode”:

Alternatively you can append “/safe” to the notebook URL.