step11.js

mouseOver
  .append('svg:rect')
    .attr('width', width)
    .attr('height', height)
    .attr('fill', 'none')
    .attr('pointer-events', 'all')
    .on('mouseout', function() {
      d3.select('.mouse-line')
        .style('opacity', '0');
      d3.selectAll('.mouse-per-line circle')
        .style('opacity', '0');
        d3.selectAll('.mouse-per-line text')
        .style('opacity', '0');
    })
    .on('mouseover', function() {
      d3.select('.mouse-line')
        .style('opacity', '1');
      d3.selectAll('.mouse-per-line circle')
        .style('opacity', '1');
      d3.selectAll('.mouse-per-line text')
        .style('opacity', '1');
    })
    .on('mousemove', function() {
      var mouse = d3.mouse(this);
      d3.select('.mouse-line')
        .attr('d', function() {
          let d = 'M' + mouse[0] + ',' + height;
          d += ' ' + mouse[0] + ',' + 0;
          return d;
        });