在React JS中使用D3 JS

2018-02-27 本文已影响54人 6df0d073b6fb

原文地址: http://www.codedata.cn/hacknews/151968967348627533

在这个博客中，我们将看到如何使用ReactJS和D3JS绘制简单的折线图。

如果您对ReactJS不熟悉，请查看官方ReactJS网页。您还可以通过步骤视频系列查看我们的 Learn ReactJS。

什么是D3.js

D3.js 是一个Javascript库，用于创建交互式动态可视化。

让我们一步一步看看如何将ReactJS与D3JS集成来绘制一些交互式可视化图。

第1步 - 获取ReactJS示例工作

我们将使用的jsfiddle例如从 ReactJS文档开始。分叉JSFiddle的例子，你应该很好去。

第2步 - 将D3.js添加为外部资源

我们将使用 Cloudflare CDN的D3.js。将D3.js添加为外部资源，如下图所示，并将以下URL作为外部资源输入。

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

[图片上传失败...(image-90660b-1519689857580)]

第3步 - 构建ReactJS组件以使用D3.js创建可视化

现在让我们尝试使用D3.js绘制折线图。

我们来创建一个Line为所提供的数据点呈现线路径的组件。

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}
        />
    );
  }

});

在上面的代码中， Line组件呈现 SVG路径。路径数据d是使用D3路径函数生成的。

让我们创建另一个组件DataSeries，它将Line为每个提供的数据系列提供组件。这产生path基于xScale与yScale用于绘制线图表生成。

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>
    );
  }

});

在上面的代码中， d3.svg.line 创建了一个新的行生成器，它将输入视为一个由两个元素组成的数组。

现在我们将创建LineChart部件，将计算xScale，yScale基于对数据和将使得DataSeries通过传递xScale，yScale，data（输入x，y值），宽度，高度的图表。

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}>
          <DataSeries
            xScale={xScale}
            yScale={yScale}
            data={data}
            width={width}
            height={height}
            />
      </svg>
    );
  }

});

这里 d3.scale.ordinal 构造一个可以具有离散域的序数标度，而 d3.scale.linear则构造一个线性定量标度。

你可以在这里了解更多关于D3定量标度的知识。

现在我们需要LineDataSeries用数据调用组件。

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')
);

带有id的元素container将被呈现的内容替换LineChart。

如果我们现在看看输出结果，我们会看到曲线图如何绘制。

[图片上传失败...(image-645bfb-1519689857580)]

为了以模块化的方式构建复杂的可视化，我们可以根据它们的优点和缺点，使用下面提到的开源库之一。

ReactJS + D3.js开源项目

这里有两个流行的开源ReactJS + D3.JS项目。

反应-D3

优点

支持条形图，折线图，面积图，饼图，烛台图，散点图和树形图。
传奇支持。
工具提示支持。

缺点

不支持动画。您可以使用D3转场实现动画。
只有堆叠的条形图支持。

反应-D3-部件

优点

自定义比例支持。
支持条形图（堆积，分组），折线图，面积图，饼图，散点图。
工具提示支持。

缺点

无传奇支持。
不支持动画。

概要

下面是在帖子中构建的JSFiddle的最终工作示例。