0

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

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

这里的其他帖子提到import * as d3 from 'd3'。我已经尝试过了，但它仍然无法正常工作。

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

知道如何让它工作吗？

4

2 回答 2

0

从技术上讲，它不是您导入的语法正确的 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 。

于 2018-02-06T00:05:12.360 回答
0

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()您至少需要创建一个函数，或者您可以使用无状态函数组件：

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看起来不错的组件 - 这是要使用的模型。

于 2018-02-06T00:05:57.583 回答