react-d3-component 在 create-react-app 中实现

Question

我是新来的反应。 通过研究，我发现 React-D3-component 可以达到我的目的。

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

我有一个 create-react-app，样板准备就绪。我需要将此图放入 create-react-app 项目中。

请指导我通过一个示例，逐步解释如何实现这种图表。

Answer 1

为了使您的应用正常运行，需要执行以下几个步骤：

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

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

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

   npm install react-d3-components --save
   

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

   import ReactD3 from 'react-d3-components'
   

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

这个工作流程应该适用于任何用于测试目的的 React 模块。