Добавление графики в приложение React с помощью D3 - Line Graph

D3 позволяет нам легко добавлять графику в интерфейсное веб-приложение.

Vue - популярный интерфейсный веб-фреймворк.

Они отлично работают вместе. В этой статье мы рассмотрим, как добавить графику в приложение Vue с помощью D3.

Линейный график

Мы можем добавить линейный график в наше приложение React с D3.

Для этого пишем:

public/data.csv

year,population
2006,20
2008,25
2010,38
2012,41
2014,53
2016,26
2017,42

App.js

import React, { useEffect } from "react";
import * as d3 from "d3";
const createLineChart = async () => {
  const margin = { top: 20, right: 20, bottom: 30, left: 50 },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
  const x = d3.scaleTime().range([0, width]);
  const y = d3.scaleLinear().range([height, 0]);
  const valueline = d3
    .line()
    .x(function (d) {
      return x(d.year);
    })
    .y(function (d) {
      return y(d.population);
    });
  const svg = d3
    .select("body")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`);
  const data = await d3.csv("/data.csv");
  data.forEach(function (d) {
    d.population = +d.population;
  });
  x.domain(
    d3.extent(data, function (d) {
      return d.year;
    })
  );
  y.domain([
    0,
    d3.max(data, function (d) {
      return d.population;
    })
  ]);
  svg.append("path").data([data]).attr("class", "line").attr("d", valueline);
  svg
    .append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x));
svg.append("g").call(d3.axisLeft(y));
};
export default function App() {
  useEffect(() => {
    createLineChart();
  }, []);
  return (
    <div className="App">
      <style>{`
        .line {
          fill: none;
          stroke: green;
          stroke-width: 5px;
        }
      `}</style>
    </div>
  );
}

Мы создаем функцию createLineChart для создания линейного графика.

Сначала мы пишем:

const margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

, чтобы установить поля, ширину и высоту диаграммы.

Затем мы добавляем объекты x и y, чтобы мы могли добавить минимальное и максимальное значения для строк:

const x = d3.scaleTime().range([0, width]);
const y = d3.scaleLinear().range([height, 0])

Затем мы устанавливаем данные для осей x и y:

const valueline = d3
  .line()
  .x(function(d) {
    return x(d.year);
  })
  .y(function(d) {
    return y(d.population);
  });

Затем мы добавляем элемент svg в наш компонент с помощью:

const svg = d3
  .select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left}, ${margin.top})`);

Затем мы читаем данные из CSV с помощью:

const data = await d3.csv("/data.csv");

Затем мы добавляем домены x и y с:

data.forEach(function(d) {
  d.population = +d.population;
});
x.domain(
  d3.extent(data, function(d) {
    return d.year;
  })
);
y.domain([
  0,
  d3.max(data, function(d) {
    return d.population;
  })
]);

чтобы вернуть метки для осей x и y.

Чтобы добавить строку, мы пишем:

svg.append("path").data([data]).attr("class", "line").attr("d", valueline);

Добавляем ось x с помощью:

svg
  .append("g")
  .attr("transform", `translate(0, ${height})`)
  .call(d3.axisBottom(x));

И добавляем ось Y с помощью:

svg.append("g").call(d3.axisLeft(y));

Заключение

Мы можем добавить линейный график с D3 в наше приложение React.