如何使用d3的每种方法使用ES6箭头表示法

Question

出于某种原因，d3使用this来引用.each()次迭代中的当前元素。

我有这段代码：

var me = this;
...
d3.selectAll(".region").each(function(d) {
    d3.select(this).style("fill", me.compute_color(...));
})

使用ES6，我可以使用箭头符号来避免覆盖this：

d3.selectAll(".region").each(d => {
    d3.select(this).style("fill", this.compute_color(...));
})

但是，此代码不起作用，因为d3正在选择错误的元素。事实上，我已经失去了对元素的唯一引用，因为this没有被d3覆盖。

如何更改d3.select(this)以使其有效？

Answer 1

您可以使用作为第二个参数传递的索引来访问集合中的正确元素：

let selection = d3.selectAll(".region");
selection.each((d, i) => {
    d3.select(selection[0][i]).style("fill", this.compute_color(...));
})