如何使用 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);
    }
  };

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

[{"emotion":"Neutral","value":52},{"emotion":"Positive","value":27}, {"emotion":"Negative","value":19}]

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

这是在渲染中将数据发送到 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 获得的数据转换为数组，但您不确定这是否是您需要的格式

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

 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)