Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow a reference point to be specified for interactive zooming #211

Open
cpietsch opened this issue Jul 12, 2020 · 7 comments · May be fixed by #212
Open

Allow a reference point to be specified for interactive zooming #211

cpietsch opened this issue Jul 12, 2020 · 7 comments · May be fixed by #212
Labels
feature

Comments

@cpietsch
Copy link

cpietsch commented Jul 12, 2020 •
edited
Loading

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.
@Fil Fil added the feature label Jul 12, 2020
@mbostock
Copy link
Member

Sounds reasonable. These are supported in the programmatic interface #178 #184, but not yet in the wheel and dblclick listeners.

d3-zoom/src/zoom.js

Line 219 in c609de4

p = mouse(this);

d3-zoom/src/zoom.js

Line 284 in c609de4

p0 = mouse(this),

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
Copy link
Author

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 added a commit that referenced this issue Jul 13, 2020
@Fil
zoom.center() defines a center function for the reference point of th…
aa8323f 
…e zoom; defaults to d3.pointer

fixes #211
@Fil Fil linked a pull request Jul 13, 2020 that will close this issue
Open
@Fil
Copy link
Member

Fil commented Jul 13, 2020

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

Fil added a commit that referenced this issue Jul 13, 2020
@Fil
zoom.center() defines a center function for the reference point of th…
14ab156 
…e wheel event; defaults to d3.pointer

fixes #211
Fil added a commit that referenced this issue Jul 13, 2020
@Fil
fix the mousedown-wheel-translate issue
f76063d 
(see comment #211 (comment))
@cpietsch
Copy link
Author

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
Copy link

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
Copy link

ptgamr commented May 30, 2023

I am in desparate need for this center() function

Fil added a commit that referenced this issue May 30, 2023
@Fil
zoom.center() defines a center function for the reference point of th…
df77d81 
…e wheel event; defaults to d3.pointer

fixes #211
Fil added a commit that referenced this issue May 30, 2023
@Fil
fix the mousedown-wheel-translate issue
3afbe2a 
(see comment #211 (comment))
@Fil
Copy link
Member

Fil commented May 30, 2023

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

@tomatenhans tomatenhans mentioned this issue Sep 11, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Zoom center d3/d3-zoom
5 participants
@Fil @cpietsch @mbostock @filipinascimento @ptgamr