tooltip flickering on svg circles inside graph

[Imran Akbar]

Hi,

   I'm new to d3.js; I'm trying to build a line chart with tooltips that show up when you hover over data points.  This is what I have so far:

www.akbars.net/test/test.html

The tooltips show up when you move over the data point circles, but they flicker.  However, they work just fine when you move the mouse over circles outside of the graph defined using plain vanilla SVG.

Any ideas?

I'm using these pages as reference:

http://bl.ocks.org/1629644 (this page only works when you have the console open)

http://onehackoranother.com/projects/jquery/tipsy/

thanks,

imran

[Bob Monteverde]

I may be wrong, but it may be because your mouse is hovering over the tooltip itself on the small dots.

I had originally used tipsy with my tooltips, but later found them just annoying to deal with, so I ended up writing my own tooltip for my d3 charts (https://raw.github.com/novus/nvd3/master/src/tooltip.js)

Also, doing tooltips on mouseeneter/exit on points produces a pretty crappy effect (IMO)... its much nicer to use a voronoi on top of the points (even better a clipped voronoi)... there's an example on the wiki... I also do it on my scatter (which I use overlaid on line and area charts) that can be sen here https://raw.github.com/novus/nvd3/master/src/models/scatter.js   (I use a slightly different clipping technique than the one in the example.. its VERY close to the same, but I managed to get slightly better performance)

Good luck,

Bob

[Mike Bostock]

An easy way to fix this is to add the style pointer-events: none to
the tooltips; this way, you won't cause a mouseout event when the
tooltip is displayed. (You could also solve this by adding mouseover /
mouseout listeners to the tooltip itself.)

I second Bob's recommendation for Voronois to make tooltips more
accessible. Though in this case there's an even simpler option since y
is a dependent variable: display the tooltip based on the closest
point in the x-dimension.

Mike

[Imran Akbar]

thanks Mike,

   that sounds like a good way of doing it.  This function I've written identifies the correct point I should be displaying a tooltip for, but the event only triggers when my mouse is moving over one of the lines in my graph.  How would I get it to trigger the event for the area of the entire top-level <svg> tag, not just drawn elements inside it?

var svg = d3.select("#graphs_table tr:last-child td." + row).append("svg:svg")

            .attr("width", w + m[1] + m[3])

            .attr("height", h + m[0] + m[2])

            .append("g")

            .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

      svg.on("mousemove", function()

      {

        var x = d3.svg.mouse(this)[0];

        var index = Math.round((x/w)*num_points); //w is width

        console.log(x, w, index);

      });

imran

[Imran Akbar]

The mousemove event works on the whole graph when I remove the y axis and its "append('svg:g') code.

is there any way to keep the axis group, but maintain the event for the whole graph?

thanks,

imran

[Imran Akbar]

Just needed to add the event before adding the group, like so:

var svg = d3.select("#graphs_table tr:last-child td." + row).append("svg:svg")

            .attr("width", w + m[1] + m[3])

            .attr("height", h + m[0] + m[2])

            .on("mousemove", function()

            {

                  var x = d3.svg.mouse(this)[0];

                  ...

            }

            .append("svg:g")

            .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

[Peter Rust]

its much nicer to use a voronoi on top of the points (even better a clipped voronoi)...

there's an example on the wiki..

I believe this is the example Bob is referring to: http://bl.ocks.org/1405439

Also, I like this example that he created: http://bl.ocks.org/2070069

-- peter

 

[Tore Nauta]

If you want to see what Bob's clipped Voronoi grid looks like; go to his raw example at:

http://bl.ocks.org/d/2070069/ 

and execute the following in the javascript console:

d3.selectAll(".point-paths path").style("stroke-opacity", 1).style("stroke", "black")

Tore

[Bob Monteverde]

Hey Tore, thanks for the "compilation"... that's actually quite "old" code... while this isn't an abstraction of just the needed pieces, here's the updated example:

http://novus.github.com/nvd3/examples/lineChart.html

Bob