arrow function not working for on click event.. "function" does

This seems very odd to me so thought I’d bring it up here. I have points on a map (in a notebook) I want to change the colour when they are clicked.

This works

d3.selectAll('circle')
  .on('click', function(d, i) {
    d3.select(this)
      .style('fill', 'orange');
  });

but this shorter form doesn’t’

.on("click", d => {
   d3.select(this)
      .style('fill', 'orange');
  });

What the heck? Any ideas what the reason is?

Ah, just found this

2 Likes