如何在 D3 v6 中透過滑鼠懸停來存取節點資料？

在D3 v6 中無法在鼠標懸停時獲取節點數據

問題：

在D3 中v6，當使用selection.on()為節點新增mouseover事件監聽器時，傳回的是事件資料而非節點的資料。如何取得數據？

答案：

D3v5 及更早版本：

在D3 v5 及更早版本中，以下模式用更早版本於定義事件偵聽器：

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

其中d 是觸發事件的元素的數據，i 是其索引，nodes 是當前元素組。可以使用 d3.event 存取事件資訊。

D3v6:

在D3 v6 中，事件監聽器模式已更改為：

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

現在，事件作為第一個參數直接傳遞給監聽器，而資料是第二個參數。 d3.event 已被移除。

使用d3.select(this)

在事件監聽函數中，仍然可以使用d3.select(this) 來選擇觸發元素，即使在D3 v6 中也是如此。但是，當使用箭頭函數時，這將具有不同的範圍。

定位：

取得事件的 x,y 位置，該位置之前使用d3.mouse(this)，您現在可以使用 d3.pointer(event)。要直接存取 x 和 y 屬性，請使用 event.x 和 event.y 而不是 d3.event.x 和 d3.event.y。

範例：

以下範例顯示如何將事件和資料傳遞給 D3 v6 中的事件偵聽器函數：

const svg = d3
  .select("body")
  .append("svg");

svg
  .selectAll("rect")
  .data([1, 2, 3])
  .enter()
  .append("rect")
  .attr("width", 30)
  .attr("height", 30)
  .attr("x", function (d) {
    return d * 50;
  })
  .on("click", function (event, d) {
    console.log(d);
    console.log(d3.pointer(event));
  });

以上是如何在 D3 v6 中透過滑鼠懸停來存取節點資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！