[007] d3.ZoomTransform

 

d3.ZoomTransform

---

d3.ZoomTransform 는 생성자의 인자로 translateX, translateY, scale 이렇게 3개 값을 받아 객체를 반환하는 클래스 입니다.

 

 

예제

---

다음과 같이 typescript 코드를 작성합니다. (js 로의 빌드는 esbuild 등으로 진행 하신 후, 브라우저에서 script 태그로 불러오시면 됩니다.)

import * as d3 from 'd3';

// https://github.com/d3/d3-zoom#ZoomTransform_

window.addEventListener('load', function() {
  const w = 400;
  const h = 400;
  const canvas = document.createElement('canvas'); 
  const context = canvas.getContext('2d');
  canvas.width = w;
  canvas.height = h;

  const transform = new d3.ZoomTransform(0.8, 100, 100); // k, x, y
  console.log('transform', transform);
  console.log('transform.toString()', transform.toString());
  const boxElement = document.querySelector<HTMLElement>('.box');
  if (boxElement !== null) {
    boxElement.style.transform = "translate(" + transform.x + "px," + transform.y + "px) scale(" + transform.k + ")";
  }

  if (context !== null) {
    context.font = '12px serif';
    context.fillText('테스트 입니다.', 200, 200);
    context.fillStyle = '#000';
  }

  document.querySelector<HTMLElement>('.box')?.appendChild(canvas);
});

 

결과는 다음과 같습니다.

ZoomTransform 객체의 값들을 이용해 translate 와 scale 을 지정해주니 그대로 적용된 것을 확인할 수 있습니다.