IT技术 - 多个工具提示在react中未正确显示 - 吾爱随笔录

我正在使用 React D3 图表，并且我已经创建了图表并且工作正常。

我做了什么

我有几个图表在某些时间间隔内更新，比如实时数据
因此，为了实现这一点，我每秒都会使用效果并更新图表，并且图表中的数据会正确更新。
我已经给出了一个关于将鼠标悬停在栏上的工具提示，以便用户可以检查每个栏或行的数据。

使用以下代码显示工具提示

.on("mousemove", function (event, d) {
    // this whole code is when I hover that perticular bar
    d3.select(this)
      .transition()
      .duration("50")
      .attr("opacity", 0.6)
      .attr("x", (a) => xScaleBars(a.timeline) - 3)
      .attr("width", xScaleBars.bandwidth() + 6)
      .style("filter", "url(#glow)");

    div.transition().duration(50).style("opacity", 1);
    div
      .html(
        `</text><text"></br> value :  ${d.dataToShow}
        <br/>
        </text><text"></br> Month :  ${d.month}
        `
      )

      .style("left", event.pageX - 58 + "px")
      .style("top", event.pageY - 140 + "px");
  })
  .on("mouseout", function (d, i) {
    // this is when I move cursor out of that bar
    d3.select(this)
      .transition()
      .duration("50")
      .attr("width", xScaleBars.bandwidth())
      .attr("x", (a) => xScaleBars(a.timeline))
      .style("filter", "none")
      .attr("opacity", "1");
    div.transition().duration("50").style("opacity", 0);
  })

我面临的问题

问题是当我将鼠标悬停在一个图表组件上时，它会显示工具提示，而当我将鼠标悬停在另一个图表组件上时，它会同时显示。
我想要做的是当我悬停任何图表的一个栏而不是隐藏它时显示工具提示，我尝试了下面的代码

d3.select("svg").selectAll(".tooltipCHart").remove();

但这并不能解决我的问题，我想我遗漏了一些小部分

这是我尝试过的代码沙箱