使用react-d3-components消耗React d3面积图

Question

我正在创建一个天气应用程序，在其中使用OpenWeatherMap来获取天气预报数据。我想在面积图中绘制类似于Google Weather widget的数据。

我找不到有关D＃的太多文档，我找到了react-d3-componetns npm软件包。 Documentaton显示使用ReactDOM.render

以下消费方式无效

import React from "react";
import ReactDom from 'react-dom';
import "./styles.css";
import   ReactD3 from "react-d3-components";


export class WeatherGraph extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          label: "somethingA",
          values: [
            { x: 0, y: 2 },
            { x: 1.3, y: 5 },
            { x: 3, y: 6 },
            { x: 3.5, y: 6.5 },
            { x: 4, y: 6 },
            { x: 4.5, y: 6 },
            { x: 5, y: 7 },
            { x: 5.5, y: 8 }
          ]
        }
      ]
    };
  }

  ReactDom.render(
  <ReactD3.AreaChart
    data={this.state.data}
    width={400}
    height={400}
    yOrientation='right' // if you do not provide right default left orientation for yAxis will be used
    margin={{top: 10, bottom: 50, left: 50, right: 10}}/>,
document.getElementById('location')
)
}

下面是codeandbox链接

https://codesandbox.io/s/weather-report-rgu7y-regtl

您能建议使用它的正确方法还是参考任何示例？