如何使用 Reactjs 和 D3js 在饼图中动态显示数据

Question

我一直在尝试使用 d3 和 reactjs 创建一个饼图，但不确定将我从 api 获得的数据动态传递到饼图的位置。d3js 中的饼图是否接受对象作为数据，因为这就是我从 api 接收数据的方式，即标签和值

我的代码看起来像这样

performAnalysis = async () => {
const { enteredText } = this.state;
const body = { snippetdesc: enteredText };
const stringifiedBody = JSON.stringify(body);
const options = {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json"
},
body: stringifiedBody
};
const url = "/api/analyse";
try {
const response = await fetch(url, options);
const result = await response.json();
const {
...sentimentAnalysis
} = result.scores;
const sentimentAnalysisArray = Object.entries(sentimentAnalysis).reduce(
(carry, [emotion, value]) => [
...carry,
{ emotion, value: parseInt(parseFloat(value) * 100) }
],
[]
);
this.setState({
analysis: {
...this.state.analysis,
sentiments: sentimentAnalysisArray
}
});
console.log("the data"+"n"+JSON.stringify(this.state.analysis.sentiments)); //need to send this sentiments object to the pie-chart

} catch (error) {
console.error(error);
}
};

上面的控制台日志给出了如下输出：

[{"情绪"："中性"，"值">

：52}，{"情绪"："积极"，"值"：27}， {"情绪"："负"，"值"：19}]

我需要在饼图中将上述"情感"和"价值"显示为标签和值。如何提取此数据并将其发送到钩子组件？

这是在将数据发送到 PieHooks 组件的渲染中的样子：

return (
<div className="App">
<div>
<button onClick={performAnalysis}>Analyse</button>
</div>
<div>
<span className="label">Pie Chart</span>
<PieHooks
data={data}
width={200}
height={200}
innerRadius={60}
outerRadius={100}
/>
</div>
</div>
)

Answer 1

无需使用

JSON.stringify(this.state.analysis.sentiments) 

你直接从你的 JSON 数组获取

this.state.analysis.sentiments

Answer 2

这里如何将您从 API 获得的数据转换为数组，但您不确定这是否是您需要的格式

更新：根据媒体文章，数据集应如下所示。

let data = [{"emotion":"Neutral","value":52},{"emotion":"Positive","value":27}, {"emotion":"Negative","value":19}];
let newData = data.map(function(elem) {
return {
value: elem.value,
label: elem.emotion,
} 
});
console.log(newData)