본 포스팅에서는 react.js에서 d3를 다루는 법을 알아볼 예정입니다.

"아무도 열람하지 않은 시각화는 진정한 의미로는 시각적 산물이 아니다."
-Scott Murray

D3

⚡️데이터를 불러오고, 엮어서, 문서요소를 변환, 전이시키기 위해 사용할 문법

Doing

• Loading: 브라우저 메모리로 데이터를 불러온다.
• Binding: 필요한 HTML문서요소를 새로 만들어서 데이터를 엮는다.
• Transforming: 각 문서요소에 엮인 개별 데이터를 토대로 해당 문서요소를 변환시킨다(시각화).
• Transitioning: 사용자 입력에 대한 반응으로 문서요소의 상태를 한 값에서 다른 값으로 전이시킨다.

🚨Notice

• D3는 오래된 브라우저들을 지원하지 않는다.(익스플로러 8이하 등)
• d3의 핵심 기능은 구글맵(Google maps)나 클라우드메이드(cloudmade)가 지원하는 형태의 비트맵 이미지 타일을 다루지 않는다.
• d3는 SVG이미지나 geoJSON 데이터 같은 벡터(vector)방식에 최적화되어있다.

Creating SVG elements

🚨d3의 핵심 컨셉 중 하나는 DOM 요소에 data를 binding 하는 것 이다.

function Circles(){
  const [dataset, setDataset] = useState(
    generateDataset()
  )
  const ref = useRef()
  useEffect(() => {
    const svgElement = d3.select(ref.current)
    svgElement.selectAll("circle")
      .data(dataset)
      .join("circle")
        .attr("cx", d => d[0])
        .attr("cy", d => d[1])
        .attr("r",  3)
  }, [dataset])
  useInterval(() => {
    const newDataset = generateDataset()
    setDataset(newDataset)
  }, 2000)
  return (
    <svg
      viewBox="0 0 100 50"
      ref={ref}
    />
  )
}

• useRef()를 통해 특정 DOM을 선택할 속성을 생성, 특정 DOM요소 선택
• dataset이라는 state를 생성, data를 담을 그릇을 준비
• useEffect()를 통해 svg요소를 그리기 시작
  1) select()를 통해 ref속성을 가진 DOM요소를 선택
  2) 요소내에서 selectAll()를 통해 요소 선택
  3) data()메소드를 통해 해당 선택에서 쓰일 data를 binding
  4) join()메소드를 통해 생성할 요소(tag)를 지정
  5) attr()메소드를 통해 부여하고자 하는 attr & value 지정
• useEfect() 속에 binding data요소를 삽입(componentDidUpdate)

ref(https://wattenberger.com/blog/react-and-d3)