d3.js version 7 - pie and arc - Error: <path> attribute d: Expected number, "…LNaN,NaNZ"

I'm trying to do a spin wheel with d3.js. Everything worked fine with the old version 3. The pies and arcs didn't have any problem. When switching to d3.js v5 or later, i've got an omnipresent NaN in path attribute "d".

here's a correctly working fiddle with d3.js v3

and the same code in v7 (only calls for "arc" and "pie" are replaced as per documentation).

here's broken paths with d3.js v7

I can't figure out what's wrong and i need at least 5th version for using advanced features.

any help please?

var w = 540,
    h = 540,
    r = Math.min(w, h) / 2;

var data = [
  { "label": "iPhone 14 Pro Max", "value": 1, },
    { "label": "100B", "value": 2, },
    { "label": "Galaxy S23 Ultra", "value": 3, },
    { "label": "100B", "value": 4, },
    { "label": "Galaxy Buds Pro", "value": 5, },
    { "label": "100B", "value": 6, },
    { "label": "Apple Watch Series 8", "value": 7, },
    { "label": "Apple Airpods 3", "value": 8, },
    { "label": "iPhone 14 Pro", "value": 9, },
    { "label": "100B", "value": 10, },
    { "label": "iPad 11", "value": 11, },
    { "label": "100B", "value": 12, }
];
var svg = d3.select('#chart')
    .append("svg")
    .data([data]);
svg.attr("width", w)
    .attr("height", h)
    .style({ "width": w + "px", "height": h + "px" });

var container = svg.append("g")
    .attr("class", "chartholder")
    .attr("width", w)
    .attr("height", h)
    .attr("transform", "translate(" + (w / 2) + "," + (h / 2) + ")");
var vis = container
    .append("g")
    .attr("class", "chartInner");


var increase = Math.PI * 2 / data.length; //length in radians of each slice/field
var half = increase / 2; //half length for offset



var pie = d3.pie().sort(null).value(function(d) { return 1; });
// declare an arc generator function
var arc = d3.arc()
    .outerRadius(r)
    .startAngle(function(d, i) {
        return (i * increase) - half;
    })
    .endAngle(function(d, i) {
        return (increase * (i + 1)) - half;
    });


var pies = vis.selectAll("g.pie-slice")
    .data(pie)
    .enter()
    .append("g")
    .attr("class", "pie-slice")


pies.append("path")    
    .attr("fill", function(d, i) { return i % 2 ? "red" : "blue"; })
    .attr("d", function(d, i) { return arc(d, i); }); //returns NaN in the end
   

i'm expecting normally shaped pies on the spin wheel with d3.js version5/7

Looks like you need to specifically set an innerRadius now

var arc = d3.arc()
.innerRadius(0)
.outerRadius(r)
.startAngle(function(d, i) {
    return (i * increase) - half;
})
.endAngle(function(d, i) {
    return (increase * (i + 1)) - half;
});

https://github.com/d3/d3-shape#arcs

https://jsfiddle.net/Ltk2ueas/