Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNZ"

Question

am creating a d3.js and react pie chart and the path element is giving an error on the d attribute expecting a number.

Error: attribute d: Expected number, "MNaN,NaNLNaN,NaNZ".

am looking at my code and I can't figure out the problem.

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

You need a separate path element for each slice of the pie chart. Right now, you have only one path element and you are passing the entire pieData array to arc. Instead arc should only be passed a single element of 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