Mouse Events And Brush In D3

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.

Solution 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.).

Solution 2:

Since the brush overlay will grab your mouse events - and you need it to - I am not sure you can get around this. Ultimately event bubbling only works for the DOM tree, and these elements will be siblings at best.

Possibly instead of iterating over all data points you can iterate only those that are selected by the brush. Check out d3.touches(container)

Solution 3:

I have had the same issue. I realized that the brush overlaid the other objects (in my case were circles). So, first I created the brush rect, Then I created other objects. This way I could access to other objects' events as well.