CODEWITHSUNDEEP
javascriptjquerysvgd3.js
auto
auto

Reputation: 1153

Add region around SVG path for mouseover

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)

Upvotes: 7

Views: 3850

Answers (1)

Henry S
Henry S

Reputation: 3112

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;

Upvotes: 9

Related Questions