Q:

Issue with tooltip on d3 line chart

So I am trying to implement a tool tip for my line chart using Mark's answer/example from here Multiseries line chart with mouseover tooltip
I'm able to get the tooltip line appear as I hover over my data points however I'm blocked by an error in I assume my x.invert function. 

Uncaught ReferenceError: x is not defined

I've checked to see if this is supported d3v4 and researched other examples but no luck. 
in my Here is my full code in jsfiddle, thanks in advance.
https://jsfiddle.net/zos5jfzp/

A:

There is some mistakes in your code:
Uncaught ReferenceError: x is not defined comes from you name your scale xScale and not x
You have the same problem for your y scale, rename it to yScale
You try to get all lines with a query selector on line but you didn't assign a class to lines.
vis.append('svg:path')
    .attr('class', 'graph-line')
    .attr('d', lineGen(d.values))
    .style("stroke", function() {
        return d.color = color(d.key);
    })
    .attr('stroke-width', 2)
    .attr("id", 'tag' + d.key.replace(/[^\w]|_/g, ''))
    .attr('fill', 'none');

And
var lines = document.getElementsByClassName('graph-line');

Finally, you have to change
idx = bisect(d.Count, xDate);

to
idx = bisect(d.values, xDate);

Here is the updated fiddle: https://jsfiddle.net/zos5jfzp/1/

