D3 — 선 그래프를 사용하여 React 앱에 그래픽 추가하기

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

D3를 사용하면 프런트 엔드 웹 앱에 그래픽을 쉽게 추가할 수 있습니다.

Vue는 널리 사용되는 프론트 엔드 웹 프레임워크입니다.

그들은 함께 잘 작동합니다. 이 기사에서는 D3를 사용하여 Vue 앱에 그래픽을 추가하는 방법을 살펴보겠습니다.

선 그래프

D3를 사용하여 React 앱에 선 그래프를 추가할 수 있습니다.

이를 위해 다음과 같이 작성합니다.
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 앱에 추가할 수 있습니다.

게시물Adding Graphics to a React App with D3 — Line Graph이 The Web Dev에 처음 등장했습니다.