使用react-create-app设置D3

Question

我正在使用React-create-app作为起点的React项目。 我正在尝试将D3集成到我的项目中，但是我很难使D3正常工作。

这是我目前的项目。 我已经在d3-2.js中创建了一个React组件，并将其导入到App.js中，但是它不起作用。 看来D3回来不确定。

这里的其他帖子提到从'd3'将import *作为d3导入 。 我已经尝试过了，但仍然无法正常工作。

在webpack的文件中进行设置是否有问题？ 我已经通过npm install d3 --save安装了d3 ，它在我的package.json文件中。

任何想法如何使它工作？

Answer 1

从技术上讲，它不是您导入的语法正确的React组件，没有渲染方法或任何构造函数。

您至少要创建一个像这样的组件：

class myD3Component extends React.Component {
    componentDidMount() {
        //d3 code that modifies the svg in render() here
    }
    render() {
       return (<svg ref={d => (this.svg = d)}/>)
    }
}

有关更具体的示例，请参见https://github.com/alanbsmith/react-d3-example/blob/master/src/ProgressArc.js 。

Answer 2

文件d3-2.js Chart组件不是有效的React组件：

class Chart extends React.Component {

var url = "https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=200&aggregate=3&e=CCCAGG";

// continues...
}

您至少需要创建一个render()函数，或者可以使用无状态功能组件 ：

const Chart = (props) => {
  var url = "https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=200&aggregate=3&e=CCCAGG";    
  // etc...
}

在你CodeSandbox你也有内部的另一个组件d3.js看起来很好-这是去与模型。