A brush: selection, dates, null and moving it from code
The page sends the mouse events itself. Drag on the real chart in the editor to see the same events.
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
start | selection: [ 200, 200 ] | dates: 8 Apr to 8 Apr | rides in range: 0 | from a person: true
brush | selection: [ 200, 260 ] | dates: 8 Apr to 16 May | rides in range: 108,477 | from a person: true
brush | selection: [ 200, 320 ] | dates: 8 Apr to 23 Jun | rides in range: 244,826 | from a person: true
end | selection: [ 200, 320 ] | dates: 8 Apr to 23 Jun | rides in range: 244,826 | from a person: true
--- code moves the brush to June
start | selection: [ 285, 332 ] | dates: 1 Jun to 1 Jul | rides in range: 107,712 | from a person: false
brush | selection: [ 285, 332 ] | dates: 1 Jun to 1 Jul | rides in range: 107,712 | from a person: false
end | selection: [ 285, 332 ] | dates: 1 Jun to 1 Jul | rides in range: 107,712 | from a person: false
--- a click without dragging clears it
start | selection: [ 100, 100 ] | dates: 5 Feb to 5 Feb | rides in range: 0 | from a person: true
end | selection: null | dates: none | rides in range: 0 | from a person: true