我正在使用D3圖表，并且通過所有作業，我已經完成了圖表并做了一些改進。
我在做什么
- 我有一個顯示工具提示的功能，每當我將滑鼠懸停在任何欄上時，我都會向用戶顯示一些資訊。
- 我的圖表顯示實時資料，因此如果有任何新資料出現，它會自動創建一個新柱。
- 因此，當我將滑鼠懸停在任何條上時，資料顯示良好且完美
我的問題
因此，正如我在上面提到的那樣，資料是在一段時間后連續出現的，所以我正在獲取資料并將其添加到以前的資料中
問題是當我將最后一個欄懸停時，工具提示顯示正常，當新資料出現時，現在顯示兩個工具提示并且它繼續
但是在我的編碼中，我正在撰寫代碼以洗掉mouseout上的工具提示，但仍然遇到此問題
我的代碼
這就是我正在做的
.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");
})
上面的代碼是當我漫游漫游者時
下面是我做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);
})
- 我試過 display none 和 visibility 屬性，但沒有任何效果
- 我不知道我做錯了什么
- 我的代碼是對還是錯，這也是我沒有得到正確的
我已將所有代碼放入代碼沙箱 中 請看一下
PS：我使用每1秒設定超時的使用效果，使其每秒更新一次
我已經通過堆疊溢位檢查了所有相關建議，但沒有人幫助我可能是我錯了，但我沒有找到解決方案。
uj5u.com熱心網友回復：
Vivek，我瀏覽了代碼，發現大部分撰寫的代碼都很好。除此之外，多個工具提示的原因是每當資料更改時您都會渲染所有內容，因此您每次都附加工具提示 div，這意味著下面的代碼將執行多次，以顯示多個工具提示，以防我們的代碼沒有執行 mouseout 執行。您可以通過檢查元素來檢查這一點。
var div = d3
.select("body")
.append("div")
.attr("class", "tooltipCHart")
.style("opacity", 0);
簡單的解決方案是在添加新工具提示之前洗掉所有工具提示。
d3.selectAll(".tooltipCHart").remove();
它將解決多個工具提示的問題。
但是對于您的圖表，我的困惑是顯示工具提示是否是一個好主意，因為資料總是向左移動，因此很難長時間保留工具提示。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/414234.html
標籤：