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

I am using d3 v4 but still unable to use zoom.translateTo functionality. #137

Closed ghost closed 6 years ago

ghost commented 6 years ago

I am trying to use this functionality to zoom specific selection and center it. But even with d3 version4 it does not seem to work.

zoom.translateTo(selection, xpos, ypos)

I am expecting xpos translation along x and ypos translation along y ,such that xpos and ypos is in the the center.

I get the error zoom.translateTo is not a function

Isn't zoom.translateTo part of d3 v4 library?

mbostock commented 6 years ago

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! 🤗

hackhat commented 6 years ago

image

Looks like the zoom object is just a selection and not a proper object as is documented https://github.com/d3/d3-zoom#zoom

d3.zoom() <>

Creates a new zoom behavior. The returned behavior, zoom, is both an object and a function, and is typically applied to selected elements via selection.call.

mbostock commented 6 years ago

@hackhat That little ƒ in the console indicates that the value you are inspecting (a) is a function named “zoom” that takes a selection argument, which is exactly what d3.zoom returns.