Not everything has to enable zoom. You can selectively pick and choose which objects you’d like to enable zoom on.

Consider this tale of two circles.

We create two circles which we call circle1 and circle2. Circle1 is the circle on the left and circle2 is the circle on the right.

Here’s the interesting bit. We define our zoom handler and set what happens when a zoom action is detected.

The function d3.zoomTransform() is used to return the current transform of the SVG element we’re zooming over. Then transform.toString() is implicitly called and we set the transform attribute of the SVG element to the current transform.

Finally we apply the zoom handler to circle2, or the right circle.

What happens when we zoom into the right circle?

What happens when we zoom into the left circle?


This post is part of a series of articles on how zoom works in version 4 of d3. Hope you enjoyed it!

2 thoughts on “Zoom in d3v4: selective zooming

  1. I know enough javascript to take a look at D3 gallery examples, modify as I need, and get jobs done. Due to lack of deep knowledge in D3, I eventually hit the wall if I want to implement something more sophisticated. Your blogging helped me to have very understanding of d3.zoom(), and I thank you for that.

    1. Thanks Hun! I’m in the same boat as you – my understanding of D3 certainly isn’t deep. As I figure out how something works, I post it up here so that hopefully I can help others past the same roadblock. Thanks for reading!

Leave a Reply

Your email address will not be published. Required fields are marked *