score:1

Accepted answer

Try this:

var mousemoveFunc = function(d, i) {

  var x0 = xz.invert(d3.mouse(this)[0]);

  var lastDate,
      cys = [], //<-- create array to hold y values for circles
      ds = []; //<-- create array to hold tooltip text

  dataGroup.forEach(function(e) { //<-- loop the data (I removed the map since we now need to return two things)
    var i = bisectDate(e.values, x0, 1),
        d0 = e.values[i - 1],
        d1 = e.values[i];

    var d = x0 - d0.date > d1.date - x0 ? d1 : d0;

    lastDate = d.date; //<-- hold onto the date (same for all xs)
    cys.push(d.value); //<-- hold onto the y value for all circles
    ds.push(e.key + " " + d.value); //<-- make the tooltip line
  });

  var mouse = d3.mouse(svg.node()).map(function(d) {
    return parseInt(d);
  });
  var left = Math.min(containerwidth, mouse[0]+margin.left+margin.right),
      top = Math.min(containerheight, mouse[1]+margin.top+margin.right);

  d3.selectAll(parent + ' .d3-focuspoint')
    .classed("hidden", false)
    .attr("cx", xz(lastDate)) //<-- set x position
    .attr("cy", function(d,i) {        
        return yz(cys[i]); //<-- loop the 3 circles and set y position
  });

  tooltip
    .html(lastDate.toString() + "<br/>" + ds.join("<br/>"))
    .classed('hidden', false)
    .style('left', left + 'px')
    .style('top', top + 'px');          

};

Updated fiddle.


Related Query

More Query from same tag