🏠 back to Observable

d3-zoom snap to nearest point instead of mouse pos

In d3 v3 there used to be a zoom.center() to adjust the target point while zooming via mousewheel / touch. Basically you could define a (center) target and when the user does a zoom input the zoom would steer in that direction. This was useful to avoid zooming into dead space of a scatter plot.

I was trying to recreate that behaviour with no luck. Got the nearest neighbour implemented via a quadtree (voronoi can be used here too) but the “steering” part is missing:

I have seen that a reference point is possible, but not for the interactive part ? https://github.com/d3/d3-zoom/pull/184/commits/fbd16edc312c85c2841b0880f3d1d210ee229d45

It is feasible but what I came up with is quite a hacky solution:

you may want to open an issue on https://github.com/d3/d3-zoom/issues

Nice, that works. Thanks! So you used the filter because it is evaluated at first and then overwitten the clientX/Y.

I have added a d3.event.type === “wheel” statement to allow panning

Probably the location to add this feature would be here: https://github.com/d3/d3-zoom/blob/master/src/zoom.js#L219 right ?

Couldn’t stop fiddling around and came up with this solution, which is a bit less hacky and gives control over the snappiness @Fil :


It would be better to focus the efforts on the new branch https://github.com/d3/d3-zoom/blob/two/src/zoom.js#L239

(I’ve checked the new notebook and the movement makes me a bit “seasick”.)

True, it feels a bit too bouncy. I updated the snap factor to a linearish behaviour and reshared the notebook.