Question

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

Here是我目前的项目。我在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

文件Chart中的d3-2.js组件不是有效的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()函数，或者您可以使用stateless functional component：

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内的另一个组件看起来很好 - 这就是要使用的模型。

使用react-create-app

2 个答案: