Q:

Is it possible to have a cursor not interact with a JavaScript line?

I have built a graph with d3. When the cursor moves over the top lines of the graph, the mouse doesn't interact with the line, but that is not the case on the bottom. When I scroll over the bottom lines the cursor changes and it means that you can't interact with the focus rectangle. Is there anyway to make it so the cursor won't realize it's going over a line like the top part of the graph?
Here's the graph: http://jsbin.com/obAzUNa/9/edit
Thanks.

A:

try this in your css:
path {
  pointer-events: none;
}

EDIT: ok, somebody didn't like this answer. :-( My quick look at the jsbin and setting pointer-events on path seemed to do exactly what was asked for. Perhaps it's too broad of a solution.
On second look, the example seems to work fine as is. But there is a little flicker of the cursor as you pass over the paths. Perhaps it's browser specific - don't know. 
But let's make it more specific to the topic paths
http://jsbin.com/EjINUNI/1/
.topic path {
  pointer-events: none;
}

The brush still functions, and there is no flickering of the cursor, or interference that I can see.
The other possibility would be to render the brush later in the source order, so that the paths come first, and the brush sits on top.

