使用箭頭函式

D3.js 中的大多數函式都接受匿名函式作為引數。常見的例子是 .attr，.style，.text，.on 和 .data，但列表比這更大。

在這種情況下，將按順序評估每個所選元素的匿名函式：

1. 當前資料（d）
2. 目前指數（i）
3. 現任組（nodes）
4. this 作為當前的 DOM 元素。

資料，索引和當前組作為引數傳遞，D3.js 中的著名的第一，第二和第三個引數（其引數傳統上在 D3 v3.x 中命名為 d，i 和 p）。但是，對於使用 this，不需要使用任何引數：

.on("mouseover", function(){
    d3.select(this);
});

當滑鼠懸停在元素上方時，上面的程式碼將選擇 this。檢查它在這個小提琴工作： https ： //jsfiddle.net/y5fwgopx/

箭頭函式

作為新的 ES6 語法，與函式表示式相比，箭頭函式具有更短的語法。然而，對於經常使用 this 的 D3 程式設計師來說，存在一個陷阱：箭頭函式不會建立自己的 this 上下文。這意味著，在一個箭頭函式中，this 從封閉的上下文中有其原始含義。

這在幾種情況下都很有用，但對於習慣於在 D3 中使用 this 的編碼器來說這是一個問題。例如，在上面的小提琴中使用相同的例子，這將不起作用：

.on("mouseover", ()=>{
    d3.select(this);
});

如果你懷疑它，這裡是小提琴： https ： //jsfiddle.net/tfxLsv9u/

嗯，這不是一個大問題：人們可以在需要時簡單地使用常規的，老式的函式表示式。但是，如果你想使用箭頭函式編寫所有程式碼，該怎麼辦？是否可以使用帶箭頭函式的程式碼並在 D3 中正確使用 this？

第二和第三個論點相結合

答案是肯定的，因為 this 與 nodes[i] 相同。提示實際上存在於整個 D3 API 中，當它描述時：

…用 this 作為當前的 DOM 元素（nodes[i]）

解釋很簡單：由於 nodes 是 DOM 中當前的元素組，i 是每個元素的索引，nodes[i] 指的是當前的 DOM 元素本身。也就是說，this。

因此，可以使用：

.on("mouseover", (d, i, nodes) => {
    d3.select(nodes[i]);
});

這裡是相應的小提琴： https ： //jsfiddle.net/2p2ux38s/