使用箭头函数

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/