React + D3.js (1) D3 소개와 React와 접목

모든 Docs는 github wiki에 정리되어 있다.

웹 상에서의 시각화는 D3가 거의 표준처럼 여겨져서 이번 프로젝트에 사용하기 위해 배워본다.

 

D3는 '저수준 라이브러리'다. 그래서 chart.js 처럼 뚝딱 차트를 만들어주는 것과 같은 일을 하지 않는다.

차트 외에 svg, canvas를 다루기 위해 d3.js를 사용할 때도 많습니다.

예를 들어 svg 수작업으로 로고를 넣을 때, 로딩 인디케이터를 css가 아니라 svg로 그릴 때 등 d3.js를 사용한 사례도 많습니다.

 

 

github.com/d3/d3/wiki

d3/d3

 

React와 D3을 같이 사용하는 방법

 

D3는 DOM을 직접 제어하고 React는 Virtual DOM으로 제어한다.

 

state 등 값을 기반으로 React가 DOM을 조작해야지, 코더가 직접 DOM을 조작하는 것은 (그것이 더 빠르거나 느리거나를 떠나서) React를 바르게 사용하는 방법이 아니다.

 

그런데 D3는 React를 기반으로 이루어진 viz 툴이 아니기 때문에 React와 D3를 같이 사용하는 방법에 대해 여러 의견이 있다.

 

www.smashingmagazine.com/2018/02/react-d3-ecosystem/

위 게시물에 따르면 React + D3를 사용하는 방법 4가지가 정리되어 있습니다. 각 방법의 쟁점은 DOM 조작을 D3에게 맡기느냐 , React이 하게 두느냐입니다.

 

여기서 가장 일반적으로 사용되는 방법은 DOM은 React에게, 계산은 D3에게하게 두는 것입니다. SVG path 계산, scale, layouts, transformations 등의 선/도형등의 모양을 계산하는 것만 D3가 하게하고 나머지는 React에게 맡깁니다. 

 

이러한 방법은 아래 영상에 따르면 다음과 같은 장점들이 있습니다. 요약하자면 D3 사용이 더 편해진다는 거죠.

 

Data visualisation chat about D3.js, P5.js, JavaScript, Python with kosamari, sxywu and shiffman

• D3 진입 장벽이 높은 이유는 초반에 enter/update/exit 패턴에 대해서 배우는 것 때문 (그래도 배워야 한다. 별도의 포스트에서 다루기로 하겠다)
• React 를 사용하면 enter/update/exit 안 쓰고 D3로 계산하는 법만 알면 됨, 이 같은 DOM 조작 기능이 React에 이미 내장되어있기 때문에
• 떄문에 React 를 알면 D3 진입이 오히려 쉬울 수도 있음

 

 

간단한 개념 증명

 

설치

yarn add d3
yarn add @types/d3 // typescript 쓸거면 받아 주십쇼

 

운용

 

워낙 직관적이라서 설명할 게 없네요.

useRef로 circle과 같은 svg element를 넣을 DOM을 잡아주고 selection 객체를 만들어 이리저리 사용해주면 됩니다.

jquery랑 비슷하다고 했는데 그런 듯 합니다 ㅎ

 

그리고 해당 Ref를 Reactive하게 관리하기 위해 useEffect 내부에 넣어줘서 관리합니다.

import React, { useRef, useEffect, useState } from "react";
import "./App";
import { select } from "d3";

function App() {
  const [data, setData] = useState([24, 30, 45, 70, 26]);
  const svgRef = useRef(null);

  useEffect(() => {
    const svg = select(svgRef.current); // selection 객체

    svg
      .selectAll("circle")
      .data(data)
      .join(
        (enter) => enter.append("circle"),
        (update) => update.attr("class", "updated"),
        (exit) => exit.remove()
      )
      .attr("r", (value) => value)
      .attr("cx", (value) => value * 2)
      .attr("cy", (value) => value * 2)
      .attr("stroke", "red");
  }, [data]);

  return (
    <>
      <svg ref={svgRef}></svg>
      <button onClick={() => {setData(data.map(el => el + 5))}}>increase + 5</button>
      <button onClick={() => {setData(data.filter(el => el > 35))}}>filter circle r should gt 35</button>
    </>
  );
}

 

결론적으론, 아래처럼 직접 React 컴포넌트 상에서 Dom을 지정한 것과 같은 결과를 보여줍니다.

단지 계산을 D3에 맡겼을 뿐.

<svg ref={svgRef}>
  {data.map((el, i) => (
    <circle r={el} key={i}>
      {el}
    </circle>
  ))}
</svg>

 

 

참고하면 좋은 글, 영상)

 

d3를 기반으로 React에서 사용하기 쉽게 사용할 수 있도록 airbnb에서 만든 visx라는 툴이 있다. 사용해보면 좋을 듯.

airbnb.io/visx/

visx | visualization components

 

D3와 React 접목 방법에 대한 견해

weiji.io/2020/06/09/d3-and-react/

D3.js 와 React 를 접목시키는 법

 

d3.js를 제대로 공부해보고자 한다면 아래 커리큘럼을 따라가자. 

mobicon.tistory.com/275?category=539879

[D3.js] 배우는 방법

 

D3 개발자인 mike bostock의 블로그 글들. 똑똑하다.

bost.ocks.org/mike/

Mike Bostock

observablehq.com/@mbostock

Mike Bostock / Observable

 

d3 + react

www.youtube.com/watch?v=9uEmNgHzPhQ&list=PLDZ4p-ENjbiPo4WH7KdHjh_EMI7Ic8b2B&ab_channel=TheMuratorium

 

d3 + html/css/js

www.youtube.com/watch?v=n5NcCoa9dDU&list=PL6il2r9i3BqH9PmbOf5wA5E1wOG3FT22p&ab_channel=d3Vienno

 

d3 full course

www.youtube.com/watch?v=_8V5o2UHG0E