在React JS中使用D3 JS

時間 2019-11-16

標籤 react 使用 d3 欄目 React 简体版

原文原文鏈接

原文地址，若是感興趣能夠加我微信: xiaobei060537, 一塊兒交流。html

在這個博客中，咱們將看到如何使用ReactJS和D3JS繪製簡單的折線圖。react

若是您對ReactJS不熟悉，請查看官方ReactJS網頁。您還能夠經過步驟視頻系列查看咱們的 Learn ReactJS。git

什麼是D3.js

D3.js 是一個Javascript庫，用於建立交互式動態可視化。github

讓咱們一步一步看看如何將ReactJS與D3JS集成來繪製一些交互式可視化圖。ajax

第1步 - 獲取ReactJS示例工做

咱們將使用的jsfiddle例如從 ReactJS文檔開始。分叉JSFiddle的例子，你應該很好去。swift

第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繪製折線圖。dom

咱們來建立一個Line爲所提供的數據點呈現線路徑的組件。ide

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')
);
複製代碼