[D3.js] zoom 효과

codingman (64)in #dclick • 6 years ago (edited)

[D3.js] zoom 효과

D3.js 공식홈페이지 : https://d3js.org/

오늘은 간단히 zoom 효과만 실험을 하겠습니다.

1. zoom()함수

.call(d3.zoom().on("zoom", function () {
    svg.attr("transform", d3.event.transform)
 }))

zoom()함수에 on()함수에서 "zoom"타입으로 캔버스(svg)를 줌 효과를 부여하기 위해서 "transorm"속성을 잡아주네요. 잡아줄 때 줌 위치는 d3.event.transorm이 되는데 줌은 마우스가 가리키는 위치에서 줌이 시작되네요.

2. Circle(원)을 확대/축소 실험

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

<script>
var svg = d3.select("body").append("svg") //캔버스영역
   .attr("width", 500)
   .attr("height", 500) 
    .call(d3.zoom().on("zoom", function () {
      svg.attr("transform", d3.event.transform)
    }))
   .append("g")

 svg.append("circle") //원
   .attr("cx", 250)
   .attr("cy", 250)
   .attr("r", 10)
   .attr("fill","blue")
</script>
</body>

캔버스 영역에 줌 함수를 붙였네요. 캔버스 영역에서 마우스의 가운데 스크롤을 움직이면 해당 마우스 좌표를 기준으로 확대/축소가 일어나게 되네요.

[결과]