Pan and zoom SVG, HTML or Canvas using mouse or touch input.

Pan & Zoom Axes

delaunay.find & zoom

X/Y Zoom

Mike Bostock

Zoomable Scatterplot

Scatterplot tour

Zoomable area chart

Versor Zooming

Zoom (SVG, Rescaled)

Zoom (Canvas, Rescaled)

Smooth zooming

Drag & Zoom

Zoom with Tooltip

Zoom to bounding box

Zoomable Raster & Vector

Programmatic Zoom

Zoom (Canvas)

Zoom (SVG)

Zoomable Map Tiles

Pannable chart

d3.interpolateZoom

Zoomable bar chart

D3 Documentation

d3-zoom

Gallery

When zoomming the chart, the y-aixs can't read clearly, so I think add a "backgorund" for y-axis will be more readable when zoom the chart

```js
svg.append("g")
    .attr("class", "x-axis")
    .call(xAxis);

// add a white rect as the y-axis background before generate the y-axis
svg.append('rect')
    .attr('x', 0)
    .attr('y', 0)
    .attr('width', margin.left)
    .attr('height', height)
    .attr('fill', 'white')
  
svg.append("g")
    .attr("class", "y-axis")
    .call(yAxis);
```

Benbinbin

alphabet.csv