了解 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 v6 及更高版本中的事件偵聽器有何變化?的詳細內容。更多資訊請關注PHP中文網其他相關文章!