Adding a tooltip on a line chart with interpolation to show x and y values

[Daniel Ristic]

Hi,

I've been working on a multiple series line chart and donut chart on timestamped values (the line chart showing historical data and the donut chart showing just the latest values of the same data set) and I'm in the process of adding some mouseover effects to make it more interactive.

So far I've been able to add mouse listeners on paths on the line chart and arcs on the donut chart so that on mouseover, the corresponding series is highlighted on both charts (see live example here).

Now I'd like to add a tooltip when the mouse goes over the line chart, showing value and time for a particular series (same idea as here).

As you can't directly bind a mouse listener to the points of the path, I've seen 3 ways to do this :

• Add some circles on top of the line chart and bind the listeners to them. This seems to be the simplest approach, and the circles can even be invisible, but they capture my original mouseover event and prevents the series to highlight on mouseover.
• Add Voronoi layout areas on top and bind the listeners to them. The problem is that it masks the underlying path even more than before.
• Track the mouse pointer position and use the inverse function to find the closest point in the dataset for each series, and use the getTotalLength and getPointAtLength methods to display the tooltip to the right place along the path.

Does anyone either know of a way to do this without masking the underneath listeners, or simply has already seen a working example of something like that in d3.

Thanks!

[Christophe Viau]

One neat trick is to get the mouse position and use the axis invert to select the point closest to the mouse: http://bl.ocks.org/gniemetz/4618602
Chris

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Kévin Cohen]

Hi Daniel, 

I am trying to puzzle out the same kind of issue you described in your message. Chris' answer is interesting but I wanted to know if you now have a working example of some more information / resources to share. 

Best, 

Kevin