Learn D3.js

Simple SVG zooming and panning

You can quickly add simple zooming and panning to any map or chart with using the d3.zoom() behavior. First, create an SVG group as a container for the zoomable map:

const globe = svg.append("g");

Then append the countries and the graticule to this object (they were previously appended on the SVG):

globe.selectAll("path.country") ...globe.append("path").attr("class","graticule") ...

You also need a component to capture the zoom events. It can be a background rectangle as follows:

const rect = svg.append("rect").style("fill", "none")        .attr("pointer-events", "all")        .attr("width", width)    // svg width        .attr("height", height)  // svg height        .call(zoomBehavior);

The zoomBehavior() function is created by d3.zoom()