javascript - 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. 按照此处的示例，在您的主页中创建图表组件。

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