多个工具提示未在反应中正确显示

Question

我正在使用 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();

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

here is my code sandbox which I tried

Answer 1

问题是您每次 re-render 图表时都会创建一个新的工具提示 div。

更好的方法是在开始时隐藏工具提示 div（在函数组件的渲染/return 中），然后修改其内容和样式（不透明度：1）在 mouseover 和 mouseout 上。使用 ref.

跟踪工具提示 div

查看工作codesandbox（我只修改了图表 1，您可以对图表 2 进行类似的修改）

多个工具提示未在反应中正确显示

Multiple tooltips not showing correctly in react

html

javascript

d3.js

reactjs

react-hooks