Add region around SVG path for mouseover

Question

Is there a way to add a region over a line path in an svg-generated graph?

I want a user to be able to hover near , not just over, a line on a line chart and have things happen after the mouseover.

Currently, with the code I have, you have to mouseover the actual line. But I want to set a region around the line.

(Adding padding to the path doesn't seem to work)

Answer 1

My approach would be to draw a second path over the first, which uses the same data and line function, but is transparent and with a larger stroke-width.

Then attach the mouseover and mouseout listeners to the fatter line.

Fiddle here: http://jsfiddle.net/henbox/u0vz96qe/1/

Note that for demo purposes, the fatter line is not fully transparent. To make it invisible, just change

.fatpath {
    ...
    opacity:0.1;
}

to be opacity:0;