javascript - Add region around SVG path for mouseover - Stack Overflow

admin管理员组

文章数量:1324849

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)

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)

• javascript
• jquery
• svg
• d3.js

Share Improve this question Follow asked Apr 16, 2015 at 15:12 autoauto 1,17333 gold badges1919 silver badges5050 bronze badges 4

• 1 just create an invisible rectangle (region) so when you hover over that rect your mouseover event fires – AJ_91 Commented Apr 16, 2015 at 15:20
• Am I appending the rect to the path or the path to the rect? – auto Commented Apr 16, 2015 at 15:40
• just append the rect to whatever you're appending the path to but append the path to it first so the rect gets created on top of the path – AJ_91 Commented Apr 16, 2015 at 15:43
• That makes sense. Thanks. This seems to work. Now I just have to figure out how to size the rect appropriately. – auto Commented Apr 16, 2015 at 18:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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/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;

本文标签： javascriptAdd region around SVG path for mouseoverStack Overflow