D3.js은(는) 무엇을 하나요?
개요
D3.js는 데이터를 DOM 요소에 바인딩하여 맞춤형 대화형 데이터 시각화를 구축하기 위한 저수준 JavaScript 라이브러리입니다. 스케일, 축, 셰이프 생성기, 지리적 투영, 힘 시뮬레이션, 계층형 레이아웃을 제공하여 개발자가 시각적 출력을 완전히 제어할 수 있게 하며, 계산된 스케일과 레이아웃을 통해 React와 통합됩니다.
지침
- 데이터를 바인딩할 때는
.data(dataset).join("element")(D3 v6+)를 사용하여 enter/update/exit 패턴을 구현하고, 접근자 함수를 통해 바인딩된 데이터에서 속성과 스타일을 설정합니다. - 스케일을 만들 때는 적절한 유형을 선택하고 (
scaleLinear는 연속형,scaleBand는 범주형 막대,scaleTime은 날짜,scaleOrdinal은 컬러 매핑), 항상d3.extent()를 사용하여 데이터에서 도메인을 설정합니다. - 축을 구축할 때는
d3.axisBottom(scale)또는d3.axisLeft(scale)로 생성하고,d3.format()을 사용하여 눈금을 구성하고 레이블 형식을 지정하며, 크기가 변경될 때 다시 생성합니다. - 차트 유형을 만들 때는 복잡한 시각화를 위해 셰이프 생성기 (
d3.line(),d3.area(),d3.arc(),d3.pie(),d3.stack())와 레이아웃 함수 (d3.treemap(),d3.forceSimulation(),d3.geoPath())를 사용합니다. - 상호 작용을 추가할 때는 부드러운 데이터 업데이트를 위한 트랜지션 (
.transition().duration(750)), 호버 시 툴팁, 탐색을 위한 브러싱/줌을 사용합니다. - React와 통합할 때는 수학(스케일, 레이아웃, 데이터 변환)에 D3를 사용하고 DOM 렌더링에는 React를 사용하며,
useMemo에서 값을 계산하고useEffect와 ref를 사용하여 D3 기반 애니메이션을 처리합니다.
예제
예제 1: 여러 차트 유형으로 실시간 대시보드 구축
사용자 요청: "API 데이터로 선형 차트, 막대 차트, 원형 차트가 있는 대시보드를 만들어 주세요"
작업:
- x축에는
d3.scaleTime(), y축에는d3.scaleLinear()로 공유 스케일 설정 - 부드러운 곡선 보간과 영역 채우기가 있는
d3.line()을 사용하여 선형 차트 구축 - 지연된 enter 트랜지션이 있는
d3.scaleBand()를 사용하여 그룹 막대 차트 구축 - 호버 툴팁이 있는
d3.pie()와d3.arc()를 사용하여 도넛 차트 구축
출력: 데이터가 변경될 때 부드럽게 업데이트되는 애니메이션 차트가 있는 반응형 대시보드.
예제 2: 힘 기반 네트워크 그래프 생성
사용자 요청: "개체 간의 관계를 대화형 네트워크 그래프로 시각화해 주세요"
작업:
forceManyBody,forceLink,forceCenter로d3.forceSimulation()설정- 범주별로
d3.scaleOrdinal()로 색상을 지정하여 원형 노드 렌더링 d3.drag()로 노드를 다시 배치하기 위한 드래그 상호 작용 추가d3.zoom()으로 줌 및 팬 구현, 호버 시 툴팁 추가
출력: 드래그 가능한 노드, 색상 코드 범주, 줌 탐색이 있는 대화형 힘 기반 그래프.
가이드라인
- 스케일, 레이아웃, 데이터 처리에는 D3를 사용하고, React 앱에서는 DOM 렌더링을 React가 처리하도록 합니다.
- 수동 enter/update/exit보다는
.join()을 사용하여 더 간단하고 깔끔한 데이터 바인딩을 구현합니다. - 스케일 도메인은 범위를 하드코딩하지 말고 항상 데이터(
d3.extent())에서 설정합니다. - 축 레이블과 툴팁에는
d3.format()을 사용합니다:",.0f"는 천 단위,"$.2f"는 통화. - 부드러운 데이터 업데이트 애니메이션을 위해
easeCubicInOut과 함께 750ms 트랜지션을 추가합니다. ResizeObserver콜백에서 스케일을 다시 계산하여 시각화를 반응형으로 만듭니다.- 접근성을 위해 SVG 요소에
aria-label과 의미 있는<title>태그를 추가합니다.