1. Line chart 만들기

1. 설치

npm install d3

1. import

import * as d3 from 'd3';

// or

import {select} from 'd3';

1. element 선택

d3.select(selector)

selector string에 해당하는 첫 번째 element를 선택, 해당하는 element가 없으면 빈 selection을 반환한다

const anchor = d3.select("a");

d3.selectAll(selector)

selector string에 해당하는 모든 element를 선택, element는 document상에서 top-to-bottom 순서로 선택되며, 해당하는 element가 없거나, selector가 null 또는 undefined인 경우 빈 selection을 반환한다.

const anchor = d3.select("p");

1. react에서는 type,class,Id를 사용하지 않아도 ref를 사용하여 element를 참조할 수 있다.

const ref = useRef();

useEffect(() => {
  const currentElement = ref.current;
  const svg = d3.select(currentElement);
}, [data])

// D3에서는 .select, .selectAll을 많이 사용하는데, element가 렌더링 되기 전에
// .select, .selectAll을 사용하면 문제가 생길 수 있다.
// 컴포넌트가 렌더링 된 이후에 ref에 접근하기 위해 useEffect 사용한다. 
// d3를 다루는 모든 코드는 useEffect 안에 작성한다.

1. div 안에 svg를 추가해서 차트를 그린다. ref가 div를 참조하게 하고 ref를 select 함수에서 사용해서 div element를 포함하는 selection을 만든다.

useEffect(() => {
    const currentElement = ref.current;
    const documentElement = d3.select(currentElement)
}

return (
    <>
      <h2> Chart </h2>
      <div ref={ref} style={{
        width: '50vw',
        height: '50vh'
      }}/>
    </>
  );

1. svg를 추가하고 viewBox를 지정 - call, append, attr