使用D3.js与React开发饼图时path的d属性报MNaN,NaNLNaN,NaNZ错误如何解决

• 首先确认d3.pie()的返回值类型：d3.pie()执行后返回的是数组，每个元素对应一个饼图扇区的角度参数，原代码直接把整个数组传给d3.arc()生成器，参数格式不匹配，生成器无法计算出正确的坐标，就输出了带NaN的路径字符串。
• 其次验证d3.arc()的入参要求：弧生成器要求传入单个扇区的角度对象（包含startAngle/endAngle/padAngle等属性），而非整个pie生成的数组。

调整渲染逻辑，遍历pieData的每个扇区对象生成对应path即可，修改后代码如下：

import React from 'react'
import * as d3 from 'd3'

function Pie() {
    const data = [{name: 'simba', value: 60}, {name: 'kiki', value: 40}]
    const pieData = d3.pie().value(d => d.value)(data)

    const arc = d3.arc()
        .innerRadius(0)
        .outerRadius(50)
        
    return (
        <svg width={100} height={100}>
            <g transform={`translate(50, 50)`} >
                {pieData.map((entry, index) => (
                    <path 
                        key={index} 
                        d={arc(entry)} 
                        fill={index === 0 ? '#2ecc71' : '#3498db'} 
                    />
                ))}
            </g>  
        </svg>
    )
}

export default Pie

• 给svg元素明确设置宽高属性，避免部分浏览器默认尺寸过小导致图形裁剪
• 遍历生成多个path时必须加key属性，符合React列表渲染规范
• 扇区对应的原始数据存储在entry.data属性中，后续需要展示分类名、数值等可以直接从该字段取值

内容的提问来源于stack exchange，提问作者Phares