Zoom: rescaled axis, limits, and the wheel taking over
Each gesture ends with a 'zoom ended' line: d3 sends the end event after a wheel gesture has been idle for a moment.
A brush selects a range by dragging, and a zoom changes what part of the chart you see. This topic shows the event shapes d3.brush and d3.zoom really send, how to turn them into dates, what the limits do and do not stop, and how to avoid a chart that steals the page's scroll.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a zoom.filter that ignores the wheel completely and only allows drag and double-click.
After a brush end, write the code that returns the rows inside the selection, handling null.
Explain it without notes
What does event.selection contain for a brush, and when is it null?
Why does brush.move need a sourceEvent check in the handler?
How do you show the zoomed part of a time axis without scaling the whole SVG?
Preview
Console
Nothing logged yet.Expected console output
plain wheel zooms, and the page cannot scroll (default prevented): true
zoom ended: k = 1.15 | x = -49 | visible: 24 Jan to 7 Dec
zoom ended: k = 8 | x = -2334 | visible: 8 Jun to 24 Jul
scaleTo(50) gave k = 8
zoom ended: k = 50 | x = 0 | visible: 4 Dec to 12 Dec
transform(k=50) gave k = 50
zoom ended: k = 1 | x = 0 | visible: 1 Jan to 31 Dec