Zooming and panning are fundamental features in any web-based visualization. A large visualization, such as a map or a network diagram, might display only part of a view, requiring that the user zoom out in order to have a general view of the entire chart, zoom in to view the details, and scroll or pan to view adjacent parts that don't fit on one screen.
Zooming may involve several events and different input devices. A typical process is initiated by scrolling a mouse wheel or by performing a sequence of mousedown (or touchstart), mousemove (touchmove) and mouseup (or touchend) events. In D3, these native events are grouped into three zoom events: start, zoom, and end that are handled by a zoom behavior object.
A zoom behavior is created with the d3.zoom() function, as shown in the following code:
const zoom = d3.zoom();
You can then apply it to a selection...
