search

d3 / d3-zoom

Pan and zoom SVG, HTML or Canvas using mouse or touch input.
https://d3js.org/d3-zoom
ISC License
507 stars 143 forks source link

click and dblclick are not exclusive? #153

Closed AlchemyUnited closed 5 years ago

AlchemyUnited commented 6 years ago

What I'm trying to do is based on

"Zoom to Bounding Box II - Updated for d3 v4" https://bl.ocks.org/iamkevinv/0a24e9126cd2fa6b283c6f2d774b69a2

I have the first click to do exactly what that map does. Then after than initial (single) click I ignoring single clicks and zoom via wheel or double click. That is, pick a state, bring it "forward" and then drill down. So far, so good.

The problem is, if the initial click is actually a double click, those clicks seem to be treated by D3 as two successive single clicks. Even with svg.call(zoom).on("dblclick.zoom", null).

What happens is the first click starts but before it can finish the second click cuts it short and stops the transform before it's complete. That is, before waiting to make sure a click is not one of two (i.e.,dblclick) D3 takes off on the first click, but (afaik) makes to effort or option to control / interpret a second click.

I've tried preventDefault(). I've tried flag to change configuration of the d3 object. For example, remove svg.call(zoom) from svg.call(zoom).on("dblclick.zoom", null) after the first zoom start. Nuttin'.

Something isn't right. But maybe it's me? Is the UX outlined above not possible?

AlchemyUnited commented 6 years ago

D3 overlapping click and dblclick aside, the solution that seems to be working for me is to not add svg.call(zoom); until the callback function for the zoom on("end", fn_cb)

This solution was REALLY difficult to uncover. Was it just me?

mbostock commented 5 years ago

This sounds like standard browser behavior. A double click gesture consists of two click events followed by a dblclick event.

Please use Stack Overflow tag d3.js to ask for help. Stack Overflow provides a better collaborative forum: thousands of D3-related questions have been asked there, and some answers may be relevant to you.

When asking for help, please include a link to demonstrate the issue, preferably as an Observable notebook. It is often impossible to debug from code snippets alone. Isolate the issue and reduce your code as much as possible before asking for help. The less code you post, the easier it is for someone to debug, and the more likely you are to get a helpful response.

If you have a question about D3’s behavior and want to discuss it with other users, also consider the d3-js Google Group or joining the d3-js Slack.

Thank you! 🤗