The original address, if interested, you can add me wechat: Xiaobei060537, together with the exchange.

In this blog, we’ll see how to draw a simple line chart using ReactJS and D3JS.

If you are not familiar with ReactJS, check out the official ReactJS web page. You can also view our Learn ReactJS in the step video series.

What is the D3. Js

D3.js is a Javascript library for creating interactive dynamic visualizations.

Let’s take a step by step look at how to integrate ReactJS with D3JS to draw some interactive visualizations.

Step 1 – Get the ReactJS sample work

The JSFiddle we will use for example starts with the ReactJS document. Bifurcated JSFiddle example, you should be good to go.

Step 2 – Add d3.js as an external resource

We will use Cloudflare CDN d3.js. Add d3.js as an external resource, as shown in the figure below, and enter the following URL as an external resource.

https:/ / cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js
Copy the code

Image upload failed…(image-90660b-1519689857580)

Step 3 – Build the ReactJS component to create the visualization using d3.js

Now let’s try drawing a line chart using d3.js.

Let’s create a Line component that renders Line paths for the data points provided.

const Line = React.createClass({

  propTypes: {
    path: React.PropTypes.string.isRequired,
    stroke: React.PropTypes.string,
    fill: React.PropTypes.string,
    strokeWidth: React.PropTypes.number
  },

  getDefaultProps() {
    return {
      stroke: 'blue',
      fill: 'none',
      strokeWidth: 3
    };
  },

  render() {
    let { path, stroke, fill, strokeWidth } = this.props;
    return( <path d={path} fill={fill} stroke={stroke} strokeWidth={strokeWidth} /> ); }});Copy the code

In the code above, the Line component renders the SVG path. The path data D is generated using the D3 path function.

Let’s create another component, DataSeries, that will provide Line with components for each of the DataSeries provided. This generates a path based on xScale and yScale used to draw line charts.

const DataSeries = React.createClass({

  propTypes: {
    colors: React.PropTypes.func,
    data: React.PropTypes.object,
    interpolationType: React.PropTypes.string,
    xScale: React.PropTypes.func,
    yScale: React.PropTypes.func
  },

  getDefaultProps() {
    return {
      data: [],
      interpolationType: 'cardinal',
      colors: d3.scale.category10()
    };
  },

  render() {
    let { data, colors, xScale, yScale, interpolationType } = this.props;

    let line = d3.svg.line()
      .interpolate(interpolationType)
      .x((d) => { return xScale(d.x); })
      .y((d) => { return yScale(d.y); });

    let lines = data.points.map((series, id) => {
      return(<Line
          path={line(series)}
          stroke={colors(id)}
          key={id}
          />
      );
    });

    return( <g> <g>{lines}</g> </g> ); }});Copy the code

In the above code, d3.svg.line creates a new line generator that treats the input as an array of two elements.

Now we will create the LineChart widget that will calculate xScale, yScale based on the data and will make the DataSeries pass xScale, yScale, data (input x, y values), width, height of the chart.

const LineChart = React.createClass({

  propTypes: {
    width: React.PropTypes.number,
    height: React.PropTypes.number,
    data: React.PropTypes.object.isRequired
  },

  getDefaultProps(){
    return {
      width: 600,
      height: 300
    }
  },

  render() {
    let { width, height, data } = this.props;

    let xScale = d3.scale.ordinal()
                   .domain(data.xValues)
                   .rangePoints([0, width]);

    let yScale = d3.scale.linear()
                   .range([height, 10])
                   .domain([data.yMin, data.yMax]);

    return (
      <svg width={width} height={height}>
          <DataSeriesxScale={xScale} yScale={yScale} data={data} width={width} height={height} /> </svg> ); }});Copy the code

Here d3.scale.ordinal constructs an ordinal scale that can have a discrete domain, while d3.scale.linear constructs a linear quantitative scale.

You can learn more about the D3 quantitative scale here.

Now we need LineDataSeries to call the component with the data.

let data = {
  points: [
    [ { x: 0, y: 20 }, { x: 1, y: 30 }, { x: 2, y: 10 }, { x: 3, y: 5 },
      { x: 4, y: 8 }, { x: 5, y: 15 }, { x: 6, y: 10 } ]
    ,
    [ { x: 0, y: 8 }, { x: 1, y: 5 }, { x: 2, y: 20 }, { x: 3, y: 12 },
      { x: 4, y: 4 }, { x: 5, y: 6 }, { x: 6, y: 2 } ]
    ,
    [ { x: 0, y: 0 }, { x: 1, y: 5 }, { x: 2, y: 8 }, { x: 3, y: 2 },
      { x: 4, y: 6 }, { x: 5, y: 4 }, { x: 6, y: 2 } ]
    ],
  xValues: [0.1.2.3.4.5.6],
  yMin: 0,
  yMax: 30
};

ReactDOM.render(
  <LineChart
    data={data}
    width={600}
    height={300}
    />,
  document.getElementById('container')
);
Copy the code

The element Container with the ID replaces LineChart with the rendered content.

If we now look at the output, we will see how the graph is plotted.

Image upload failed (image-645bfb-1519689857580)

To build complex visualizations in a modular way, we can use one of the open source libraries mentioned below, based on their advantages and disadvantages.

ReactJS + d3.js open source project

Here are two popular open source ReactJS + d3.js projects.

Response – D3

advantages

  • Supports bar charts, line charts, area charts, pie charts, candlestick charts, scatter charts and tree charts.
  • Legend support.
  • Tooltip support.

disadvantages

  • Animation is not supported. You can animate using D3 transitions.
  • Only stacked bar charts are supported.
Reaction -D3- component

advantages

  • Custom scale support.
  • Support bar chart (heap, grouping), line chart, area chart, pie chart, scatter chart.
  • Tooltip support.

disadvantages

  • No legend support.
  • Animation is not supported.

The profile

Here is the final working example of the JSFiddle built in the post.