D3.js v5/v7饼图Arc生成报错：path属性d出现NaN求助

问题根源 #

1. Arc生成器参数变更：D3 v4及以后版本中，d3.arc()的startAngle和endAngle访问器仅接收单个数据对象参数，不再支持第二个索引参数i，原代码中使用i会导致计算出NaN。
2. 数据绑定错误：绑定饼图数据时，需调用pie(data)生成饼图数据数组，而非直接传入pie生成器本身。
3. 样式设置语法变更：D3 v4+中.style()不再支持传入对象，需改用链式调用或逐个设置样式。

修正后的完整代码 #

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")
  .attr("width", w)
  .attr("height", h)
  .style("width", w + "px")
  .style("height", h + "px");

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

var vis = container.append("g")
  .attr("class", "chartInner");

var increase = Math.PI * 2 / data.length;
var half = increase / 2;

// 生成饼图数据，每个切片权重相同
var pie = d3.pie()
  .sort(null)
  .value(function(d) { return 1; });

// 配置Arc生成器，利用数据对象的index计算角度
var arc = d3.arc()
  .outerRadius(r)
  .startAngle(function(d) {
    return (d.index * increase) - half;
  })
  .endAngle(function(d) {
    return (increase * (d.index + 1)) - half;
  });

// 绑定处理后的饼图数据
var pies = vis.selectAll("g.pie-slice")
  .data(pie(data))
  .enter()
  .append("g")
  .attr("class", "pie-slice");

pies.append("path")
  .attr("fill", function(d) { return d.index % 2 ? "red" : "blue"; })
  .attr("d", arc); // 直接传入数据对象，Arc生成器会自动调用访问器

关键修正说明 #

• Arc角度计算：改用数据对象自带的d.index属性（由d3.pie()生成）代替原代码中的索引参数i，符合D3 v4+的API规范。
• 数据绑定：将data(pie)改为data(pie(data))，确保传入的是饼图生成器处理后的实际数据数组。
• 样式设置：将.style({...})拆分为链式的.style()调用，适配D3新版本的语法要求。

内容的提问来源于stack exchange，提问作者GL.awog