在create-react-app中实现react-d3组件

Question

我有新的反应。 通过我的研究，我发现React-D3组件可以满足我的目的。

我正在寻找具有工具提示和可缩放功能的多系列折线图的示例。基本的折线图也可以为我的第一步提供这个技巧。

我已经准备好了创建反应应用程序，样板文件。我需要将此图表放入create-react-app项目中。

请引导我通过一个例子，它逐步解释如何实现这种图形。

Answer 1

要使您的应用有效，请执行以下几个步骤：

1. 使用Webpack配置您的create-react-app样板并确保您可以在没有React-D3组件模块的情况下运行它。

2. 找到主页组件（通常是main.js）尝试修改一些基本的HTML元素，看看是否可以通过热重新加载来查看页面上的更改。例如，添加H1红色标签。

3. 使用npm命令安装React-D3组件模块：

   npm install react-d3-components --save
   

4. 开始通过导入模块将React-D3组件添加到刚修改的主页组件中：

   import ReactD3 from 'react-d3-components'
   

5. 按照示例here，在您的主页上创建图表组件。

此工作流程适用于任何React模块以进行测试。