Mouse events and brush in D3

Question

I'm currently attempting to customize the example of a time serie chart found at http://nvd3.com/ghpages/lineWithFocus.html. This is implemented using nvd3, a library on top of d3. I would like to have tooltips for data points as in the top graph but would also like be able to select a range in the same graph like in the bottom "view finder" graph in the example.

To that end, I've added a "brush" to the example of a basic line chart (see http://nvd3.com/ghpages/line.html). The range selection works like a charm, however, tooltips for data points don't work anymore, except for points which are just out of the range of the axes. It seems, that the data points lying in the brush area don't get the mouse events anymore and that the brush absorbs them all.

What needs to be changed that the data points of the lines receive mouse events (in particular mouseover, I don't care about click)?

An attempt would be to catch all events using

d3.select(window).on("...", function) 

and then trigger some "mouseover" event over data points if applicable. How could this be achieved (I don't wan't go through all data points and then check which one is closest to the mouseevent...)? Is there a more straightforward way?

Answer 1

If you will Inspect element (Chorme) anywhere on the 'brush' you will notice the element that is built after your other graphical elements that you're trying to catch events on.

The d3.brush function is creating a hidden background to catch the mouse events.

// An invisible, mouseable area for starting a new brush.
      bg.enter().append("rect")
          .attr("class", "background")
          .style("visibility", "hidden")
          .style("cursor", "crosshair");

So the solution is to call the brush before plotting your data (lines, paths, scatter plot circles etc.).