D3로 React 앱에 그래픽 추가하기 — 파이 차트

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

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

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

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

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

파이 차트

D3를 사용하여 React 앱에 원형 차트를 추가할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.
public/populations.csv

states,percent
California,38.00
New York,18.00
Texas,20.0

src/App.js

import React, { useEffect } from "react";
import * as d3 from "d3";

const createPieChart = async () => {
  const svg = d3.select("svg"),
    width = svg.attr("width"),
    height = svg.attr("height"),
    radius = Math.min(width, height) / 2;

  const g = svg
    .append("g")
    .attr("transform", `translate(${width / 2}, ${height / 2})`);

  const color = d3.scaleOrdinal(["gray", "green", "brown"]);

  const pie = d3.pie().value(function (d) {
    return d.percent;
  });

  const path = d3
    .arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

  const label = d3
    .arc()
    .outerRadius(radius)
    .innerRadius(radius - 80);

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

  const arc = g
    .selectAll(".arc")
    .data(pie(data))
    .enter()
    .append("g")
    .attr("class", "arc");

  arc
    .append("path")
    .attr("d", path)
    .attr("fill", function (d) {
      return color(d.data.states);
    });

  arc
    .append("text")
    .attr("transform", function (d) {
      return `translate(${label.centroid(d)})`;
    })
    .text(function (d) {
      return d.data.states;
    });

svg
    .append("g")
    .attr("transform", `translate(${width / 2 - 120},20)`)
    .append("text")
    .text("Top population states in the US")
    .attr("class", "title");
};

export default function App() {
  useEffect(() => {
    createPieChart();
  }, []);

  return (
    <div className="App">
      <style>{`
        .arc text {
          font: 12px arial;
          text-anchor: middle;
        }

        .arc path {
          stroke: #fff;
        }

        .title {
          fill: green;
          font-weight: italic;
        }
      `}</style>
      <svg width="600" height="400"></svg>
    </div>
  );
}

React 코드에서 정적 파일을 읽을 수 있도록 CSV를 public 폴더에 넣습니다.
createPieChart 함수를 사용하면 svg 요소를 얻을 수 있습니다.

그리고 파이 차트의 width, height, radius를 설정했습니다.

다음을 사용하여 파이에 대한 그룹을 만듭니다.

const g = svg
   .append("g")
   .attr("transform", `translate(${width / 2}, ${height / 2})`);

그런 다음 다음을 사용하여 색상을 추가합니다.

const color = d3.scaleOrdinal(["gray", "green", "brown"]);

다음으로 파이를 다음과 같이 추가합니다.

const pie = d3.pie().value(function(d) {
  return d.percent;
});

그런 다음 다음을 사용하여 파이에 호를 추가합니다.

const path = d3
  .arc()
  .outerRadius(radius - 10)
  .innerRadius(0);

레이블은 다음과 함께 추가됩니다.

const label = d3
  .arc()
  .outerRadius(radius)
  .innerRadius(radius - 80);

그런 다음 다음을 사용하여 population.csv 파일을 읽습니다.

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

다음을 사용하여 호의 길이를 설정합니다.

const arc = g
  .selectAll(".arc")
  .data(pie(data))
  .enter()
  .append("g")
  .attr("class", "arc");

그리고 다음과 같이 파이 색상을 설정합니다.

arc
  .append("path")
  .attr("d", path)
  .attr("fill", function(d) {
    return color(d.data.states);
  });

그리고 다음을 사용하여 파이의 텍스트 레이블을 설정합니다.

arc
  .append("text")
  .attr("transform", function(d) {
    return `translate(${label.centroid(d)})`;
  })
  .text(function(d) {
    return d.data.states;
  });

마지막으로 다음과 같이 차트 제목을 추가합니다.

svg
  .append("g")
  .attr("transform", `translate(${width / 2 - 120},20)`)
  .append("text")
  .text("Top population states in the US")
  .attr("class", "title");

App 에서 글꼴과 제목 색상을 원하는 대로 설정할 수 있도록 호의 스타일을 추가합니다.

결론

React 앱에 파이 차트를 쉽게 추가할 수 있습니다.

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