레슨 1 / 8·20분
D3 기본: 선택과 데이터
D3.js란?
D3(Data-Driven Documents)는 데이터를 기반으로 DOM을 조작하여 시각화를 구현하는 JavaScript 라이브러리입니다. Chart.js 같은 차트 라이브러리와 달리 저수준 API를 제공하므로 자유도가 매우 높지만, 그만큼 학습 곡선도 있습니다. D3의 핵심은 선택(Selection)과 데이터 바인딩(Data Binding)입니다.
select와 selectAll
d3.select()는 CSS 선택자로 첫 번째 일치 요소를 선택하고, d3.selectAll()은 모든 일치 요소를 선택합니다. 선택 후 체이닝으로 속성, 스타일, 텍스트 등을 설정합니다.
javascript
// 단일 요소 선택 및 스타일 변경
d3.select('h1')
.style('color', 'steelblue')
.style('font-size', '24px')
.text('D3.js에 오신 것을 환영합니다!');
// 모든 <p> 요소 선택 및 일괄 변경
d3.selectAll('p')
.style('color', '#555')
.attr('class', 'description');데이터 바인딩: data → enter → append
D3의 가장 강력한 패턴은 데이터를 DOM 요소에 바인딩하는 것입니다. .data()로 데이터를 연결하고, .enter()로 아직 DOM에 없는 데이터를 위한 "자리"를 만든 뒤, .append()로 실제 요소를 추가합니다.
javascript
const data = [30, 80, 45, 60, 20, 90, 55];
// SVG 컨테이너 생성
const svg = d3.select('#chart')
.append('svg')
.attr('width', 400)
.attr('height', 200);
// 데이터 바인딩 → 막대 생성
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', (d, i) => i * 55)
.attr('y', (d) => 200 - d * 2)
.attr('width', 50)
.attr('height', (d) => d * 2)
.attr('fill', 'steelblue')
.style('opacity', 0.8);
// 각 막대 위에 텍스트 추가
svg.selectAll('text')
.data(data)
.enter()
.append('text')
.attr('x', (d, i) => i * 55 + 25)
.attr('y', (d) => 200 - d * 2 - 5)
.attr('text-anchor', 'middle')
.text((d) => d);- •.data(array) — 배열의 각 요소를 선택된 DOM 요소에 매핑
- •.enter() — 데이터가 있지만 DOM 요소가 부족한 부분의 가상 선택 반환
- •.append(tag) — 가상 선택 각각에 실제 DOM 요소 생성
- •.attr(name, value) — 속성 설정 (값에 함수를 전달하면 d=데이터, i=인덱스)
- •.style(name, value) — CSS 스타일 설정
- •.text(value) — 텍스트 콘텐츠 설정
💡
D3 v7부터는 .data().join("rect") 패턴을 사용하면 enter/update/exit를 한 번에 처리할 수 있어 더 간결합니다.