[javascript] D3.js를 이용한 확대/축소 이벤트 처리하기

07 Dec 2023

javascript

D3.js는 데이터 시각화를 위한 자바스크립트 라이브러리로 유명합니다. 이 라이브러리를 사용하여 확대/축소 기능을 구현하는 방법을 살펴보겠습니다.

1. 준비 작업

먼저 D3.js를 HTML 문서에 추가합니다. 다음과 같이 <script> 태그를 사용하여 D3.js를 불러옵니다.

<script src="https://d3js.org/d3.v6.min.js"></script>

2. SVG 요소 생성

확대/축소 기능을 적용할 SVG 요소를 생성합니다.

const svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

위의 코드는 <body> 요소 내에 SVG 요소를 추가하고, 너비와 높이를 각각 500으로 설정하는 예시입니다.

3. 데이터 준비

확대/축소 기능을 적용할 데이터를 준비합니다. 예시로 ‘data’라는 배열을 생성하겠습니다.

const data = [1, 2, 3, 4, 5];

4. 데이터 바인딩 및 시각화

데이터와 SVG 요소를 바인딩하여 시각화합니다.

const circles = svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", (d, i) => 50 + i * 50)
  .attr("cy", 250)
  .attr("r", 20)
  .attr("fill", "steelblue");

위의 코드는 ‘data’ 배열의 각 요소에 대해 <circle> 요소를 만들고, 이를 SVG 요소에 추가하는 예시입니다. cx, cy, r, fill 등의 속성을 통해 원의 위치와 크기를 설정할 수 있습니다.

5. 확대/축소 이벤트 처리

이제 확대/축소 이벤트를 처리할 수 있는 함수를 작성하고, 해당 함수를 SVG 요소에 연결합니다.

function zoomed(event) {
  const { transform } = event;

  circles.attr("transform", transform);
}

svg.call(d3.zoom().on("zoom", zoomed));

위의 코드는 zoomed라는 함수를 정의하고, 이 함수를 d3.zoom 객체의 on 메서드를 통해 SVG 요소에 연결하는 예시입니다. transform 객체를 통해 확대/축소 정보를 가져와서, 모든 원의 위치를 해당 정보에 따라 변경하고 있습니다.

6. 실행 결과 확인

이제 준비한 HTML 문서를 브라우저에서 실행해보세요. 마우스로 SVG 요소를 드래그하여 확대/축소를 확인할 수 있습니다.