使用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看起來很好-這是去與模型。