step12.js

d3
  .selectAll('.mouse-per-line')
	  .attr('transform', (d, i) => {
		  const xDate  = x.invert(mouse[0]);
			const bisect = d3.bisector(d => d.date).right;
			const idx    = bisect(d.values, xDate);
      
			let start  = 0;
			let finish = lines[i].getTotalLength();
			let target = null;

      while (true) {
        target   = Math.floor((start + finish) / 2);
        position = lines[i].getPointAtLength(target);
        if ((target === finish || target === start) && position.x !== mouse[0]) {
			    break;
				}
		    if (position.x > mouse[0]) {
          finish = target;
        } else if (position.x < mouse[0]) {
          start = target;
        } else {
          break;
        }
			}

      d3
        .select(this)
          .select('text')
            .text(y.invert(position.y).toFixed(0));

		  return 'ranslate(' + mouse[0] + ',' + position.y +')';
})