D3 v6 及更高版本中的事件偵聽器有何變化？

了解 D3 v6 中的事件監聽器

在 D3 中，事件監聽器用於在元素上發生特定事件時觸發操作。使用資料綁定元素時，在事件處理期間存取關聯資料非常重要。這就是 D3 v5 和 D3 v6 之間事件偵聽器模式的變化發揮作用的地方。

D3 v5 和早期版本

在D3 版本5 及更早版本中，以下內容使用模式：

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 中觸發事件的節點的綁定數據，只需在事件監聽函數中使用d參數即可。下面修正後的程式碼示範了這一點：

<code class="js">node.on("mouseover", (event, d) => {
    console.log(d.id);
});</code>

其他顯著變更

• 這個：您仍然可以使用d3。 select(this) 可以存取事件監聽函數中的目前元素，但使用箭頭函數時，其範圍可能會有所不同。
• 定位： 取得觸發事件的 x 和 y 位置相對於 SVG，使用 d3.pointer(event) 而非 d3.mouse(this)。
• 事件屬性： 事件現在直接公開其屬性，而不是透過 d3.event。例如，event.x 和 event.y 取代 d3.event.x 和 d3.event.y。

以上是D3 v6 及更高版本中的事件偵聽器有何變化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！