Why the thin line is hard to hit, and the hit path that fixes it
Failure that prints no error: a hit area that silently catches nothing. elementFromPoint is how you check it.
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
thin line only, 0 units below the line -> line
thin line only, 4 units below the line -> the background
thin line only, 12 units below the line -> the background
with the hit path, 0 units below the line -> hit
with the hit path, 4 units below the line -> hit
with the hit path, 12 units below the line -> the background
hit path with stroke none, 4 units below -> the background
... plus pointer-events: stroke, 4 units below -> hit
pointer-events: none on a transparent path -> the background