Learn D3.js

Zooming in and out

Some network charts are dense hairballs, where the details about each individual node aren't as important as the general topology they reveal. But sometimes, you might be curious to obtain information about a specific node that stands out in a dense network chart, or to have a closer look at the center of the cluster and look for patterns that aren't obvious from the general view. In such cases, you may consider adding a zoom feature to the chart.

You just need to add the behavior and apply it to the objects that contain the elements you wish to zoom. For example, this code (see Force/Interactive/6-zoom.html) adds basic zooming functionality to the charts we have created in the previous examples:

const zoom = d3.zoom() ...