I am working with D3 Charts, and by all work I have completed the chart and did some enhancement as well.

What I am doing

1. I have one function which shows tooltip, whenever I hover over any bar I am showing some info to the user.
2. My chart shows live data, so if any new data is coming it automatically creates a new bar.
3. SO when I hover over any bar then data is showing fine and perfect

My issue

4. So as I mentioned above in my case the data comes after some interval continuously, so I am getting data and adding it to previous data

5. The issue is when i Hover the last bar the tooltip shows fine, and when the new data comes so now two tooltips showing and it goes on and on

But in my coding I am writing code to remove the tooltip on mouseout, but still getting this issue

My code

This is what I am doing

.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");
  })

This above code is when I hove rover

Below is the code when I do mouseout

 .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);
  })

• I have tried display none as well as visibility property, but nothing works
• I don't know what I am doing wrong
• is My code right or wrong this also I am not getting properly

I have put all of my code in code sandbox Please have a look

PS: I am using use Effect with set Timeout for each 1 second to make it update every second

I have checked all the related suggestion by stack overflow, but none helped me out may be I am wrong but I did not found the solution.

CodePudding user response：

Vivek, I have gone through the code and found out that most of the code written is fine. Besides that the reason of multiple tooltips is that you are rendering everything whenever data changes, so you are appending the tooltip div everytime, it means below code will execute multiple times which display multiple tooltips in case where our code did not perform mouseout execution. You can check this by inspecting elements.

var div = d3
      .select("body")
      .append("div")
      .attr("class", "tooltipCHart")
      .style("opacity", 0);

Simple solution will be to remove all the tooltips before appending a new one.

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

It will resolve the issue of multiple tooltips.

But for your chart my confusion is whether is it a good idea to show tooltip or not as the data is always moving toward left so it will be difficult to keep the tooltip for long time.