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

Question

I'm new to react. By my research, I figured out that React-D3-component can serve my purpose.

I'm looking for an example of a Multi-series Line chart with tooltip and zoomable function. Basic line chart would also make this trick for my first steps.

I've a create-react-app, boilerplate ready. I need to put up this graph into a create-react-app project.

Please guide me through an example, which explains step by step how to implement this kind of graph.

Answer 1

Here are a few steps to do in order to make your app work:

1. Config your create-react-app boiler plate with Webpack and make sure you can run it without React-D3-component module.

2. Find the homepage component (normally main.js) try to modify some basic HTML elements and see if you can see the changes on page with hot-reloading. For instance, adding a H1 red tag.

3. Install React-D3-component module with npm command:

    npm install react-d3-components --save 

4. Start adding React-D3-component into your homepage component you just modified by importing the module:

    import ReactD3 from 'react-d3-components' 

5. Follow the example here , and create your chart components in your homepage.

This workflow should work for any React modules for testing purposes.