Designer Tooltips & D3 Stacked Area

[marc fawzi]

I have a stacked area chart made with d3 (one of Mike's examples)

The browser's own tooltip works fine

I tried the modified version of tipsy and qtip2 as well and neither
are smart enough to display the tooltip only when the mouse is over
the area enclosed by the path (they display the tooltip when the mouse
is over the layer in the stacked chart rather than when it's over the
shaded area of the layer that's defined by the path)

So if the stacked area chart has low aggregate shaded height at some
region and the mouse happens to be passing way above the shaded part I
still get a tooltip.

How do I avoid this?

I tried added attr("title", tooltip_text) to the svg element rather
than nest a title element in it but that did not help

Relevant parts of the cdoe:

var nest = d3.nest()
.key(function(d) { return d.key; });

var layers = stack(nest.entries(plotdata));



svg.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return z(i); })
.append("title")
.text(function(d) {
console.log($.trim(d.key))
return $.trim(d.key);
});