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 

CodePudding user response：

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.

CodePudding user response：

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