В моей программе не работает событие мыши d3, все остальное работает нормально

Question

Все отлично работает, кроме событий мыши, я не понимаю, что делать, я новичок в этом D3

svg.append('rect')
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .attr("class", "overlay")
  .attr("width", width)
  .attr("height", height)
  .on("mouseover", function () {
    console.log("mouse over");
    focus.style("display", "none");
    d3.selectAll('.points text').style("display", "none")

  })
  .on("mouseout", function () {
    console.log("mouseout");
    focus.style("display", "none");
    d3.selectAll('.points text').style("display", "none");
  })
  .on("mousemove", function () {
    console.log("mousemove");
    let i = d3.bisect(timeScales, d3.mouse(this)[0], 1);
    let di = data[i - 1];
    focus.attr("transform", "translate(" + x(di.timescale) + ",0)");
    d3.selectAll('.points text')
      .attr('x', function (d) { return x(di.timescale) + 15; })
      .attr('y', function (d) { return y(d.values[i - 1].total); })
      .text(function (d) { return d.values[i - 1].total; })
      .style('fill', function (d) { return z(d.name); });
  });

мой css

.line {
  fill: none;
  stroke-width: 3px;
}

.overlay {
  fill: none;
  pointer-events: all;
}

.hover-line {
  stroke: #B74779;
  stroke-width: 2px;
  stroke-dasharray: 3, 3;
}

Пожалуйста, предложите мне некоторая идея, с помощью которой я могу решить это. Само событие не срабатывает. Спасибо!