如何使用带有 ES6 箭头符号的 d3 的 each 方法

Question

For some reason, d3 uses this to refer to the current element in a .each() iteration.

I had this code:

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

With ES6, I can use the arrow notation to avoid overwriting this :

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

However, this code doesn't work because d3 is selecting the wrong element. In fact, I have lost the only reference to the element, because this was not overridden by d3.

How can I change d3.select(this) so that it works?

Answer 1

You can use the index that is passed as second argument to access the right element from the collection:

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

Answer 2

You can try this

d3.selectAll(".region").each((data, index, nodes) => {
    d3.select(nodes[index]).style("fill", this.compute_color(...));
});