d3
Allow a reference point to be specified for interactive zooming
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 made a workaround for this feature by modifying the zoom transform in the zoom callback and @Fil made a nice hack to override the mouse position
Probably the location to add this feature would be here somewhere here. Instead of using the mouse position we could use a reference point which needs to be declared before.
Sounds reasonable. These are supported in the programmatic interface #178 #184, but not yet in the wheel and dblclick listeners.
https://github.com/d3/d3-zoom/blob/c609de484668ae318176da7011476154e8185d7e/src/zoom.js#L219 https://github.com/d3/d3-zoom/blob/c609de484668ae318176da7011476154e8185d7e/src/zoom.js#L284
Presumably we could allow a function or a constant, and have it default to d3.mouse (d3.pointer in d3-selection@2) for the current behavior.
It could be also used for the touch input. Suggesting zoom.reference(point/function) that replaces the centroid function for non interactive zoom and mouse for interactive zoom ? Or just have one interface for the interactive reference.
More remarks after a first (failed) attempt:
scatterplot example:
- for the wheel input:
- changing the center should only be done once at the start of the gesture—otherwise when wheeling "out" we get jittering (the movement gravitates to a triangle's circumcenter, and the reference point jumps between the three vertices of that triangle).
- when wheeling out, it's better not to set the center
- for the touch input, the gesture feels weird when the reference point is not between the two touches. I'd rather not have it at all.
- for the programmatic zoomIn button, I added the same logic
complete example now at https://observablehq.com/d/9035ed7049aaa8c6
target example:
- the following sequence does not work properly: mousedown, wheel, then translate (the transform "jumps" when translating)
(issue visible at https://bl.ocks.org/mbostock/6226534, which is d3v3)
notebook example with d3@6 (alpha) at https://observablehq.com/d/48ff4a64c477cc79
Wow, nice work! Looks like the issue is quite interwoven.
The scatterplot example works great. One suggestion would be to use event.deltaY < 0 for the wheel-in detection.
The sequence on d3v3 is working fine with my Firefox, but on the d3@6 notebook it swallow some translations (only if I move very fast).
Hey any updates on that? I think Fil's PR does not work anymore with the latest d3. Having the center functionality would be great for data snap on zoom and for some pseudo-3D interactions.
I've refreshed #212 (there was a small conflict on README.md), and upgraded the test notebooks.