score:2

Accepted answer

You code is take from examples with One data serie and you have multiple series:

The important start here:

var x0 = x.invert(d3.mouse(this)[0]),
    i = bisectDate(data, x0, 1),
    d0 = data[i - 1],
    d1 = data[i],
    d = x0 - d0.date > d1.date - x0 ? d1 : d0;

city.select("circle.y")
    .attr("transform",
          "translate(" + x(d.date) + "," +  // based on date
                         y(d.close) + ")"); // you need find y value 
                                            // d.close is not defined

You have 3 serie. You could take the max value at some date and draw the circle there:

var ymax = d3.max([+d["OP"],+d["IP"],+d["Pharmacy"]])
var xm = x(d.date);
var ym = y(ymax);

city.select("circle.y")
    .attr("transform",
          "translate(" + xm + "," +
                         ym + ")");

Or, draw three circles, one for each series:

city.select("circle.y")
    .attr("transform",
          "translate(" + xm + "," +
                         y(+d["OP"]) + ")");

city.select("circle.y")
    .attr("transform",
          "translate(" + xm + "," +
                         y(+d["IP"]) + ")");

city.select("circle.y")
    .attr("transform",
          "translate(" + xm + "," +
                         y(+d["Pharmacy"]) + ")");

Now you know how to calulate (x,y) you can do the horizontal & vertical dashed lines with labels.

Here's s psudoworking code. I've let you complete it as homework :)