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

[JJ Frankovich]

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.