我正在創建一個 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
uj5u.com熱心網友回復：
餅圖的每個切片都需要一個單獨的路徑元素。現在，您只有一個路徑元素，并且pieData要將整個陣列傳遞給arc. 相反，arc應該只傳遞pieData.
uj5u.com熱心網友回復：
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
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/326003.html
標籤：d3.js 剑道-dataviz
上一篇：D3工具提示不跟隨滑鼠