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

Question

I've been trying to create a pie chart using d3 and reactjs but not sure where to pass the data that I get from the api dynamically to the pie chart. Does pie charts in d3js accept objects as data because that's how I receive the data from the api, ie, a label and value

my code looks something like this

  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);
    }
  };

the console log above gives an output like:

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

I need to show the above "emotion" and "value" in the pie-chart as labels and values. How do I extract this data and send it to the hooks component?

this is how it would look like in the render for sending the data to the PieHooks component:

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

No need to use

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

you directly get your json array from

this.state.analysis.sentiments

Answer 2

Here how to convert the data you got from the API to array, but you not sure if this is the format you need

Update : based on the Medium article the data set should look like this.

 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)