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?
Brushing is the interactive specification a one- or two-dimensional selected region using a pointing gesture, such as by clicking and dragging the mouse. Brushing is often used to select discrete elements, such as dots in a scatterplot or files on a desktop.
D3 is data-driven but jQuery is not: with jQuery you directly manipulate elements, but with D3 you provide data and callbacks through D3's unique data() , enter() and exit() methods and D3 manipulates elements. D3 is usually used for data visualization but jQuery is used for creating web apps.
d3 does not directly use jQuery, so the jQuery library of functions is not directly accessible in d3 by default.
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.).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With