错误：<路径> 属性 d：预期数字，“MNaN,NaNLNaN,NaNZ”答案

【问题标题】：Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNZ"错误：<路径> 属性 d：预期数字，“MNaN,NaNLNaN,NaNZ”
【发布时间】：2021-11-27 07:58:33
【问题描述】：

我正在创建一个 d3.js 和反应饼图，并且路径元素在 d 属性上出现错误，需要一个数字。

错误：属性 d：预期数字，“MNaN,NaNLNaN,NaNZ”。

正在查看我的代码，但我无法找出问题所在。

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>
            <g transform={`translate(50, 50)`} >
                <path d={arc(pieData)}/>
            </g>  
        </svg>
    )
}

export default Pie

【问题讨论】：

标签： d3.js kendo-dataviz

【解决方案1】：

您需要为饼图的每个切片使用单独的路径元素。现在，您只有一个路径元素，并且您将整个pieData 数组传递给arc。相反，arc 应该只传递pieData 的单个元素。

【讨论】：

【解决方案2】：

 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>
                <g transform={`translate(50, 50)`} >
                                       
                    {pieData.map((item) => (
                       <g>
                           <path d={arc(item)} stroke="white"/>
                       </g>
                    ))}               
                </g>  
            </svg>
        )
    }
    
    export default Pie

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。