One move as a mouse and as a finger: three coordinates
The page sends its own events so the output is the same every time. Hover the real chart in the editor and the handler runs with real events.
Pointer events give one set of events for mouse, finger and pen. This topic shows how to turn a pointer position into chart coordinates, why thin lines are hard to hit, and why hover cannot be the only way to reach a number.
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.
Make a chart with a 640-unit viewBox shown at 320 pixels. Log d3.pointer for a pointer at the pixel (160, 40) of the SVG.
Write isNear(event, svg, ux, tolerance): true when the pointer is within tolerance chart units of the vertical line x = ux.
Explain it without notes
Why use pointer events instead of mouse events plus touch events?
Why is event.offsetX the wrong number for a tooltip position in a responsive SVG chart?
A user says the tooltip on the line chart "almost never shows". What do you check first?
Preview
Console
Nothing logged yet.Expected console output
on screen: 200 x 50 pixels, but the viewBox is 400 x 100 units
mouse | clientX - left: 150 | offsetX: 150 | d3.pointer: 300 50
touch | clientX - left: 150 | offsetX: 150 | d3.pointer: 300 50