如何在 D3 v6 中取得滑鼠懸停時的節點數據

D3 v6 中滑鼠懸停時無法取得節點資料

在 D3 v6 中，事件處理機制較先前版本發生了重大變化。本文深入研究了這些更改，並提供了在滑鼠懸停事件期間嘗試檢索節點資料時遇到的常見問題的解決方案。

D3 v5 及更早版本中的事件處理

D3 v5 及更早版本中，事件處理模式遵循以下格式：

selection.on("eventType", function(d, i, nodes) { .... })

在監聽器函數中，d 表示觸發元素的數據，i 是其索引，nodes 是當前的元素組。此外，事件資訊可以透過 d3.event 存取。

D3 v6 中的事件處理

在D3 v6 中，事件處理模式已修改如下：

selection.on("eventType", function(event, d) { .... })

這裡，事件作為第一個參數直接傳遞給監聽器，資料成為第二個參數。因此，d3.event 已被刪除。

取得節點數據

要在 D3 v6 中檢索節點的數據，您可以使用新的事件處理模式。以下範例示範如何處理滑鼠懸停事件並存取資料：

node.on("mouseover", function(event, d) {
  console.log(d.id); // Outputs the id of the node
});

定位和其他事件屬性

要存取觸發事件的 x、y 位置，請使用 d3。指標（事件）而不是 d3.mouse（this）。要取得 x 和 y 屬性，請使用 event.x 和 event.y 而不是 d3.event.x 和 d3.event.y。

總結

事件處理中的關鍵變化D3 v6 涉及將事件作為第一個參數傳遞並使用 event.currentTarget 而不是 d3.select(this)。此外，出於定位目的，d3.pointer(event) 取代了 d3.mouse(this)。了解這些變更將使您能夠有效地處理 D3 v6 應用程式中的事件。

以上是如何在 D3 v6 中取得滑鼠懸停時的節點數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！