Создание графов как компоненты реагирования с d3.js

Создание графов как компоненты реагирования

Из-за сложности D3.js Я собираюсь сломать эти учебники на две статьи.

Там вполне немного статей на начало работы с d3.js. В этой статье я предполагаю, что у вас есть некоторое основное понимание D3 и сосредоточимся на использовании D3 в качестве компонента реагирования.

Создание баров

В D3 создание бара для гистограммы довольно легко – это просто группа прямоугольников SVG, обращается на экран. Во-первых, мы хотим создать простой компонент, чтобы позволить нам настроить отдельные полосы. реквизит Позвольте нам изменить цвет, ширина, высоту и местоположение каждой панели. Я попаду в то, как мы можем использовать эти реквизит отображать данные позже.

import React from 'react';

const Bar = (props) => {
  return (
    
  );
}

Bar.propTypes = {
  fill: React.PropTypes.string,
  width: React.PropTypes.number,
  height: React.PropTypes.number,
  x: React.PropTypes.number,
  y: React.PropTypes.number,
  className: React.PropTypes.string
}

Bar.defaultProps = { className: 'barchart-bar' };

export default Bar;

Создание линии

В D3 вы создаете путь, чтобы построить точки данных на экране, а затем нарисовать линию между точками. То же самое с барами, позволяя проезжать в реквизит Мы можем построить точки и линию для пути.

import React from 'react';

const Path = (props) => {
  return (
    
  );
}

Path.propTypes = {
  fill: React.PropTypes.string,
  path: React.PropTypes.string,
  stroke: React.PropTypes.string,
  strokeWidth: React.PropTypes.number,
  className: React.PropTypes.string
}

Path.defaultProps = { className: 'linechart-path' };

export default Path;

Создание графика барлайн

Я создал компонент, который просто принимает данные через реквизиты и объединяет предыдущие два компонента вместе. Положив их вместе, как это позволяет нам масштабировать бары и линии вместе. Код D3 здесь может быть довольно сложным, но посмотрите на курс D3 Egghead.io (и в ближайшее время у меня будет введение в D3). Чтобы надеть, мы рассчитываем масштаб баров и линий (я пропускаю масштабирование оси, но оно похоже на масштабирование решеток и путь).

import * as d3 from 'd3'
import React from 'react'
import Chart from '../chart'
import Axis from '../axis'
import DataSeries from './DataSeries'

class BarLineChart extends React.Component {

  render () {
    return (
      
          
            
          
      
    )
  }
}

BarLineChart.propTypes = {
  margins: React.PropTypes.obj,
  barWidth: React.PropTypes.number,
  barMargin: React.PropTypes.number,
  width: React.PropTypes.number,
  height: React.PropTypes.number,
  className: React.PropTypes.string,
}

BarLineChart.defaultProps = {
  className: 'BarLineChart',
  margins: {top: 20, right: 20, bottom: 30, left: 40},
  barWidth: 15,
  barMargin: 15,
}

export default BarLineChart

Вот окончательный продукт:

Чтобы узнать, как строить интерактивные диаграммы с D3.js, посмотрите это видео. Вы сможете отобразить свой набор данных в качестве таблицы, гистограмма, диаграммы столбца, график разброса и т. Д.