[D3] D3 Enter Update Exit with React

 데이터 시각화 라이브러리 D3를 다루어 봅시다. 해당 라이브러리는 리액트에 사용하기에는 어쩌면 어려울 수 있는 저수준 라이브러리입니다. 그러나 시각적으로 재미있는 기능이 많고, 자주 쓰는 라이브러리이므로 간단한 명령어를 알아봅시다.

 

Enter, Update, Exit

 Enter, Exit라는 명령어를 보았을 때 생각났던 것은, 객체에 마우스가 들어오고 나갔을 때 시점을 생각했습니다. 그러나 이는 아예 달랐습니다.

 

 

 

Update라는 것은 선택한 요소들의 attr값을 바꿔주는 것 뿐입니다. 요소들을 다시 선택해서 재활용을 시도합니다. 막대의 너비로 데이터를 표시했다면, 높이나 x,y 좌표 등은 그대로 놔두고 너비의 값만 바꾸어 줍니다. 

 

Enter는 data()로 받아들인 요소의 수가 이미 존재하는 객체보다 많을 때 새로 생성된 요소들을 선택합니다. append를 해서 data만큼 요소들 만들어주고, 새로 생성한 요소들의 attr를 data에 맞게 넣어줍니다. enter 이후의 코드들은 새로 생성된 요소들에 반영됩니다.

 

Exit은 data()로 들어온 요소보다 이미 존재하는 객체가 적을 때, 선택받지 못한 요소들을 선택합니다. 보통 선택을 받지 못한 요소들이 아무것도 안하고 놀기 시작하니까 remove 메서드를 통해서 해당 요소들을 지우는 작업이 따라붙게 됩니다.

 

예시

이를 활용한 예시 코드를 확인해 봅시다.

function App() {
  const [data, setData] = useState<number[]>([10, 20, 30, 40, 50]);
  const svgRef = useRef(null);

  useLayoutEffect(() => {
    const svg = select(svgRef.current);

    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 (
    <div className='App'>
      <svg ref={svgRef} />
    </div>
  );
}

 

 위와 같이 사용할 수 있습니다. 지정되지 않은 것들은 circle을 만들어주고, 놀고 있는 것들은 remove해줍니다. update는 특정 클래스를 업데이트하면서 원하는 행동을 할 때 사용할 수 있습니다.

 

참고자료

https://lumiamitie.github.io/d3/d3-enter-update-exit/

D3 - enter/update/exit