首頁(yè) 猿問(wèn) 懸停時(shí)顯示 d 的 D3 工具提示問(wèn)題

懸停時(shí)顯示 d 的 D3 工具提示問(wèn)題

JavaScript

MMTTMM 2023-06-09 17:46:47

冒險(xiǎn)進(jìn)入 D3 領(lǐng)域并嘗試設(shè)置一個(gè)帶有工具提示的簡(jiǎn)單條形圖，但似乎我無(wú)法訪問(wèn)我傳遞給鼠標(biāo)懸停事件的數(shù)據(jù)：chart.on("mouseover",?function(d){ ??????return?tooltip.style("visibility",?"visible") ????????????????????.text(d.name?+?"?-?"?+?d.calories?+?"?cal"); ?????? ????})感謝任何答案，因?yàn)槲矣悬c(diǎn)困惑

查看完整描述

1 回答

白衣染霜花

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊

嘗試以下：

chart.selectAll("rect").on("mouseover", function(event, d){?

? return tooltip.style("visibility", "visible")

? ? .text(d.name + " - " + d.calories + " cal");

})

我看到兩個(gè)錯(cuò)誤：

分配mouseover事件時(shí)，您需要在每個(gè) 上執(zhí)行rect，而不是在上執(zhí)行chart。所以chart.selectAll("rect").on部分修復(fù)它。
mouseover處理函數(shù)的第一個(gè)參數(shù)event不是data.?第二個(gè)是data。所以你需要做function(event, d)而不是function(d)