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

Translate values are not calculated properly (svg zoom) #207

Closed HarshSharma12 closed 4 years ago

HarshSharma12 commented 4 years ago

I have a svg on a page which displays an image. The svg has a zoom callback to scale and translate the image but when I try to pan across the x and y values for the transform event are not calculated properly (I observed this when the scale value is less than 1, not sure if it affects other values).

It returned values as high as translate(-7319162427.508864,-250872513.49670592) scale(0.2871745887492586)

I created an observable to demonstrate the bug. https://observablehq.com/@harshsharma12/zoom-svg

To reproduce -

1) Zoom out using the wheel (easier to see if scale < 0.4) 2) The longer distance you pan across by keeping the mouse button down, the higher the translation values (absolute values) are.

Fil commented 4 years ago

I've sent you a suggestion to fix it.

HarshSharma12 commented 4 years ago

Thank you so much @Fil. That fixed my issue.

Posting it here for more visibility

“the zoom behavior should be set on svg, and the transform applied to its svg:g (zoom_node) descendant”

I have not updated the original observable in case reference is required in the future. Observable with the fix can be found here - https://observablehq.com/@harshsharma12/zoom-bug-svg-fixed