How to use the d3.selectAll(...).each() method with ES6 arrow notation

[wil93]

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 anymore 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?

[mehmetavsar]

Two possibilities:

• d object may be holding a property that could be used as a reference (like DOM Object) or a selector string to itself

Or

var mainSelection = d3.selectAll(".region");
mainSelection.each((d,i) => {
  mainSelection[i].style("fill"...  // Not sure if it's indexed.
 // d3.select(mainSelection[i]).style(... // would be my 2nd try
});

[mbostock]

ES6 arrow functions lexically bind this, which prevents you from being able to access the this context of the selected node set by D3. There’s no way to fix this globally without abandoning the use of this as the selected node; some potential approaches are discussed in #2246.