Allow a reference point to be specified for interactive zooming

[cpietsch]

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.

[mbostock]

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.

[cpietsch]

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.

[Fil]

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

[cpietsch]

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).

[filipinascimento]

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.

[ptgamr]

I am in desparate need for this center() function

[Fil]

I've refreshed #212 (there was a small conflict on README.md), and upgraded the test notebooks.