search

d3 / d3-zoom

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

.on('start', ...) and .on('end',...) firing on single click #152

Closed AlchemyUnited closed 6 years ago

AlchemyUnited commented 6 years ago

I'm a D3 n00b so please excuse me if I've missed something. Love the tool tho' finding v4-centric example can be a bit wonky. In any case, I have something like this. 

    var zoom = d3.zoom()
        .scaleExtent([1, 2048])
        .on("start", zoomStart)
        .on("zoom", zoomDoing)
        .on("end", zoomEnd);

On double click all 3 fire, as expected. However, on a single click both zoomStart and zoomEnd fire (but zoomDoing does not).

Also, all 3 also fire on a drag (which I think I saw listed in the issues already).

Perhaps all this is expected behavior. So be it. Because...

Ultimately, what I'm wanting to do is resize map pins based on zoom / scale. That is, for example, I'm using a circle (as a pin) with a radius of 3. But as I zoom in, r = 3 is too large and pins that are near each other overlap. For example, imagine NYC. May hope is to allow the zoom (and drag) but set the pin / circle radius based on the "depth" of the zoom.

I can certainly work around the above, but figured it might be a bug, or maybe there's a better way?

tia.

mbostock commented 6 years ago

This sounds like the expected behavior. The event table in the API reference:

https://github.com/d3/d3-zoom/blob/master/README.md#api-reference

AlchemyUnited commented 6 years ago

Hey thanks @mbostock.

Ok, it might be as documented, but I'm not so sure it's expected. That is, if there is no zoom'ing then how can there be a start and and end? How can something that never happened have a start or an end? Right? :)

Also, since you're The Man :) can you give me / us a clue how to differential between a zoom and a drag? Please?