Zoom

Despite the name, the zoom behavior lets you do more than just zoom--you can also pan! Like the drag behavior, zoom automatically handles both mouse and touch events and then triggers the higher-level zoom event. Yes, that includes pinch-to-zoom!

Remember that map from Chapter 4, Making Data Useful--the one with the rendition flights? Let's add the zoom and pan behavior to it!

You attach the zoom behavior to an element, which then fires an event when the user interacts with that element in a zoom-y way. This results in a transform value, which you can use to either apply a transform to the container element, or use for reprojecting geometry. We'll start with the latter.

Comment out everything in chapter5/index.js and add the following: ...

Get D3.js 4.x Data Visualization - Third Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.