Accepted answer

In your hoverMouseOn method, the variable d is undefined. You'll need to use d3.bisector to find the closest data point, like this:

var bisectDate = d3.bisector(function(d) { return d.class; }).left;

var mouseDate = xScale.invert(mouse_x);
var i = bisectDate(data, mouseDate);

var d0 = data[i - 1]
var d1 = data[i];
var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;

Also, I put the mousemove listener on 'vis' instead of 'rectHover':

            .on("mouseout", hoverMouseOff)
            .on("mousemove", hoverMouseOn);

and used d.number instead of d.class for the y values. If you want the tooltip to always be on the line it gets a bit more complicated. Here's a working fiddle.

Might be easier to just put the tooltip at your mouse coordinates like in this fiddle.

Related Query

More Query from same tag