d3.js - 错误：属性 d：预期数字，“MNaN,NaNLNaN,NaNZ”

Question

我正在创建一个 d3.js 和反应饼图，并且 path 元素在 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.jskendo-dataviz

Answer 1

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