Estoy trabajando con gráficos de reacción D3, he creado gráficos y funciona bien.

Que he hecho

• Tengo varios gráficos que se actualizan en algunos intervalos de tiempo, algo así como datos en vivo
• Entonces, para lograr esto, utilizo el efecto y actualizo mis gráficos cada segundo, y mis datos en los gráficos se actualizan correctamente.
• He dado una información sobre herramientas al pasar el mouse sobre la barra, para que el usuario pueda verificar los datos de cada barra o línea.

Usando el siguiente código para mostrar la información sobre herramientas

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

Problema al que me enfrento

• El problema es que cuando coloco el cursor sobre un componente del gráfico, se muestra la información sobre herramientas, y cuando coloco el cursor sobre el otro, ambos se muestran al mismo tiempo.

• Lo que estoy tratando de hacer es mostrar la información sobre herramientas cuando paso el cursor por la barra de cualquier gráfico y luego lo oculto, probé debajo del código

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

Pero no resuelve mi problema, creo que me falta una pequeña parte

aquí está mi sandbox de código que probé