Upgrading from v3 to v7 requires additional renders for my custom gauge

[jjfrankovich]

Hello, I am in the process of upgrading some widgets from d3 v3 to v7 and I have been using the changelog as my guide:

https://github.com/d3/d3/blob/main/CHANGES.md

I was able to fix all the documented stuff like "d3.svg.arc()" to "d3.arc()" and here is the code pens of before and after of it "working".

v3
https://codepen.io/blueShell/pen/abxWBrO

v7
https://codepen.io/blueShell/pen/MWRmbYG

One problem I have for v7 is that I have to re-run the render function multiple times to get it rendering correctly.
To reproduce this, you can get it to re-run the render function by clicking the svg.

in v7 you actually have to click it twice for a total of 3 renders to get it working. Also, I can get it down to 1 click by adding some extra elements beforehand (but none of these extra dom elements were required in the v3 version):

//TODO: why does new d3 require these extra elements setup beforehand?
//gauge.append("g").attr('class', 'arc');
//gauge.append("g").attr('class', 'label');

I was hoping to get some clarification or maybe I missed something in the documentation.
Thank for any help.

[jjfrankovich]

With some more research, I see that with v4+, the selections are immutable. So something like this worked fine in v3:

  // Labels
  labels = gauge.selectAll('.label')
    .data(dataArray);

  labels
    .enter('g')
    .append('g')
    .attr('class', 'label');

The original "labels" selection would get the new data after it was appended by the enter, in v4 it doesn't because the selection doesn't get updated anymore.

Now I need to combine the .data with the join/enter before storing it as a separate variable in order to get the selection and all is well again:

  // Labels
  labels = gauge.selectAll('.label')
    .data(dataArray)
    .join('g')
    .attr('class', 'label');