错误： <path> 属性 d：预期数量，"MNaN,NaNLNaN,NaNZ"

Question

我正在创建一个d3.js和react饼状图，而path元素在d属性上给出了一个错误，期望得到一个数字。

错误:属性d: Expected number， "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 

Answer 1

你需要一个单独的路径元素为每个块饼图。现在，你只有一个路径元素，你要把整个pieData数组传递给arc。相反，arc应该只传递pieData的一个元素。

Answer 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