Raphael: Improving Range of Path Onclick

Question

I have a project I'm working on that creates a graph that looks like this:

There is a functionality of the original app that I'm rewriting into web where you can click near the black paths and it will select that path, as indicated by the one path that is noticeably thicker.

I managed to get the onclick for the black paths working, but I'm finding the range to which you can select these lines is far too small (it's pixel perfect), and would make the feature worthless.

Is there a way I can expand the range at which you can click a path? Even 5 pixels on each side would help immensely.

My current line of thinking is to make significantly thicker white paths beneath the black paths and use their onclick, but while I'm testing that out I figured I'd ask if there's some other (hopefully easier) way that's not clear to me that someone else might know. I haven't seen anything within the Raphael documentation that does what I need, but of course if there is something I missed I'd love to see it. Any ideas are appreciated.

Answer 1

Thanks to Ian for confirming my suspicions, this is what I ended up doing:

this.line = canvas.path(this.lineString);
this.selectionLine = canvas.path(this.lineString); 

this.selectionLine.attr('stroke-width', 15);
this.selectionLine.attr('stroke-linecap', 'round');
this.selectionLine.attr('opacity', 0);
this.selectionLine.toFront();

The attr('stroke-linecap', 'round') bit gives the path ends a curved portion so if you click just above a path it'll still count. Likely unnecessary, but I feel it important to account for possible user frustration.

It's important that you verify that the selection path is in fact drawing above the display path, otherwise if the user does manage to click the display path's area, the selection won't go through. Of course you could just stick the onclick onto the display line too, but I feel that drawing the selection path above the other is a cleaner solution.

It looks like this if you remove the opacity line, change the color, and change toFront() to `toBack()'