왜 사용하는가?!
- SVG를 통해 다양한 해상도에서 깨짐없는 시각화 표현이 가능하다.
- 단순히 템플릿을 선택하는 것이 아닌 자유로운 커스텀이 가능하다.
- 웹 표준인 HTML, CSS, SVG로 구현되어 프레임워크의 제약이 적다.
D3.js는 데이터를 기반으로 웹에서 동적인 시각화를 만들기 위한 JavaScript 라이브러리이다.
D3는 DOM을 직접 제어하고, React는 Virtual DOM으로 제어한다.
이 둘을 통합으로 사용하려면 일반적으로 DOM은 React가 담당하고, 화면의 복잡한 계산은 D3가 담당하는 것이다.
SVG path 계산, scale, layouts, transformations 등의 선 / 도형 등의 모양을 계산을 D3가 하고, 나머지 DOM은 React가 처리하는 것 !!
💡 D3 사용하기
D3를 사용하는 방법은 useRef로 graph, circle 과 같은 🌟svg Element를 넣을 DOM을 선언하고, 🌟selection 객체를 만들어 사용하면 된다. 그리고 Ref를 useEffect 내부에 넣어주어 관리하면 된다.
- useRef를 사용하여 DOM을 선택한다.
- useEffect를 사용하여 DOM이 변경될 때마다 D3를 사용한다.
- D3를 사용할 때는 select, selectAll, data, join, enter, update, exit를 사용한다.
- select는 선택한 DOM을 반환한다.
selectAll은 선택한 DOM을 배열로 반환한다. - data는 데이터를 반환한다.
- join은 데이터를 기반으로 DOM을 생성한다.
📝 SVG란 ?
확장 가능한 벡터 그래픽으로 XML 기반의 2차원 그래픽이다. HTML 태그의 집합으로 이루어져 있다.(=즉, CSS와 JS로 컨트롤이 가능하다.)
- 장점 : 아무리 확대를 해도 이미지가 깨지지 않고, 이미지 크기를 키워도 용량이 늘어나지 않는다.
- 단점: 코드로 이루어진 이미지이기 때문에 복잡한 이미지일수록 파일 사이즈가 커진다. 그렇기에 단순한 아이콘이나 로고, 도형 등을 구현할 때 사용하는 것이 좋다.
- 우리나라 svg 파일을 받아와서 그 안에서 호버, 클릭이벤트 등을 할 수 있는 방법(커스텀가능)
- 참고 티스토리 : https://myhappyman.tistory.com/36
- d3.js 를 활용한 지도 만들기
