Skip to main content
100%

Zoom + Pan

✓ Published0🌍 Public
ZZhengYingqian
Last edited May 23, 2018
Created on May 23, 2018

This example demonstrates zooming and panning on a two-dimensional Cartesian plane using D3’s `d3.behavior.zoom` with linear `x` and `y` scales. Dragging the mouse pans the view, while the mouse wheel zooms, with the scale extent limited to 1–32×. The code renders an SVG with a light gray background, a bottom x-axis with full-height tick lines, and a left y-axis with five ticks; during zoom events, the `zoomed` handler updates the x-axis only. It builds on D3 v3 and uses SVG elements for all graphics. No data is loaded; the chart shows an empty coordinate system.

AI-generated description

An example of d3.behavior.zoom applied using x- and y-scales. This example can be extended with programmatic control to animate between preset views.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3892919'>Pan+Zoom</a>

forked from <a href='http://bl.ocks.org/ZhengYingqian/'>ZhengYingqian</a>'s block: <a href='http://bl.ocks.org/ZhengYingqian/7da52648067548ef565a504b12758ac2'>Pan+Zoom</a>

gpl-3.0 Licensed

Similar vizzes