Learn D3.js

Zoom to object

You don't have to draw a bounding box if you are only interested in zooming to a specific object. You can simply pass the object to fitExtent() so that it occupies all the available space. This is used in the next example, where the user clicks on a country and it scales to fit the viewport. Since we also use clicks to zoom out, we need a flag to keep track of the current state:

let zoomed = false;

Each shape will be a source for click events. The appropriate action will be selected depending on the state of zoomed:

d3.selectAll(".country").on("click", d => zoomed ? zoom(d) : unzoom())

The zoom() method is very simple. All you have to do is call fitSize() or fitExtent() with the current GeoJSON feature:

function zoom(object) ...