Zoom in d3 version 4: selective zooming

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.

//define zoom behaviour 
var zoom_handler = d3.zoom()
	.on("zoom", zoom_actions);

function zoom_actions(){
 var transform = d3.zoomTransform(this);
 // same as  this.setAttribute("transform", "translate(" + transform.x + "," +
 //                             transform.y + ") scale(" + transform.k + ")");
 this.setAttribute("transform", transform)
}

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

zoom_handler(circle2);

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!