[javascript] D3.js를 이용한 확대/축소 이벤트 처리하기
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 요소를 드래그하여 확대/축소를 확인할 수 있습니다.