我正在使用 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();
但這并不能解決我的問題，我想我遺漏了一些小部分
這是我嘗試過的代碼沙箱
uj5u.com熱心網友回復：
問題是div每次重新渲染圖表時都會創建一個新的工具提示。
更好的方法是在開頭（在函陣列件的渲染/回傳中）有一個隱藏的工具提示 div，然后在 和 上修改其內容和樣式（不透明度：1 mouseover）mouseout。使用 . 跟蹤工具提示 div ref。
查看作業代碼和框（我只修改了chart1，您可以對chart2進行類似的更改）
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/427203.html
標籤：javascript html 反应 d3.js 反应钩子
上一篇：資料未填充到d3