score:1

Accepted answer

So it looks like I found the issue: https://jsfiddle.net/z4g5817z/91/

Changing

const polygon = areaGroups.selectAll('polygon')

to

const polygon = areasGroup.selectAll('g.area').selectAll('polygon')

seems to have fixed it. I'm assuming this has to do with the areaGroups selection only handling enter events.

An alternative would be to keep it the way it is now and change

const areaGroups = aGroup.enter()
  .append('g')
  .attr('class', 'area');

to

const areaGroups = aGroup.enter()
  .append('g')
  .merge(aGroup)
  .attr('class', 'area');

which will produce the same result, as the update event is now also handled appropriately.


Related Query

More Query from same tag