[javascript] 자바스크립트와 GreenSock을 이용한 드래그 앤 드롭 효과를 사용한 거품 차트 구현 방법

29 Nov 2023

javascript

이번 블로그 포스트에서는 자바스크립트와 GreenSock(TweenMax) 라이브러리를 사용하여 거품 차트를 구현하는 방법을 살펴보겠습니다. 거품 차트는 데이터를 시각적으로 표현하는 데 사용되는 인기있는 차트 유형 중 하나입니다.

거품 차트에는 원들이 존재하며, 이 원들은 데이터에 따라 크기와 색상이 다릅니다. 사용자가 원을 드래그하면 다른 위치로 이동할 수 있어야 합니다. 또한, 드래그 앤 드롭 효과에 따라 원이 부드럽게 이동해야 합니다.

GreenSock 라이브러리 설치

먼저 GreenSock(TweenMax) 라이브러리를 설치해야 합니다. 다음 명령을 사용하여 npm을 통해 설치할 수 있습니다.

npm install gsap

HTML 마크업

거품 차트를 표시하기 위해 HTML 마크업을 작성해야 합니다. 다음은 예시입니다.

<div id="chart">
  <div class="bubble" data-size="20" data-color="blue"></div>
  <div class="bubble" data-size="40" data-color="red"></div>
  <div class="bubble" data-size="60" data-color="green"></div>
</div>

CSS 스타일링

만들어진 거품 차트에 스타일을 적용해야 합니다. 원의 크기와 색상은 JavaScript에서 동적으로 설정됩니다. 다음은 CSS 스타일링의 예시입니다.

#chart {
  position: relative;
}

.bubble {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  cursor: grab;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

자바스크립트 코드

이제 자바스크립트 코드를 작성하여 거품 차트에 드래그 앤 드롭 효과를 구현할 수 있습니다. 다음은 자바스크립트 코드의 예시입니다.

// 모든 거품 요소를 선택합니다.
const bubbles = document.querySelectorAll('.bubble');

// 각 거품에 대한 이벤트 리스너를 추가합니다.
bubbles.forEach(bubble => {
  bubble.addEventListener('mousedown', startDrag);
  bubble.addEventListener('mouseup', stopDrag);
});

// 드래그 시작 시 호출되는 함수입니다.
function startDrag(event) {
  // 드래그되는 원의 초기 위치를 가져옵니다.
  const startX = event.clientX;
  const startY = event.clientY;

  // 드래그된 원을 바로 위로 이동시킵니다.
  this.style.zIndex = '1';
  this.style.cursor = 'grabbing';

  // 마우스 이동 이벤트에 대한 리스너를 추가합니다.
  document.addEventListener('mousemove', drag);

  // 마우스에서 떼었을 때 호출되는 함수입니다.
  function stopDrag() {
    // 마우스 이동 리스너를 제거합니다.
    document.removeEventListener('mousemove', drag);

    // 드래그된 원의 위치를 설정합니다.
    this.style.zIndex = '0';
    this.style.cursor = 'grab';

    // 마우스를 놓은 위치에 원을 이동시킵니다.
    TweenMax.to(this, 0.5, { x: event.clientX - startX, y: event.clientY - startY, ease: Power2.easeOut });
  }

  // 마우스 이동 시 호출되는 함수입니다.
  function drag(event) {
    // 마우스를 움직인 만큼 원을 이동시킵니다.
    this.style.transform = `translate(${event.clientX - startX}px, ${event.clientY - startY}px)`;
  }
}

결과 확인하기

이제 거품 차트를 확인할 수 있습니다. HTML 파일을 열고 원들을 드래그해보면 다른 위치로 이동하는 것을 확인할 수 있습니다.

이번 블로그 포스트에서는 자바스크립트와 GreenSock을 이용하여 드래그 앤 드롭 효과를 사용한 거품 차트를 구현하는 방법을 알아보았습니다. GreenSock은 웹 애니메이션 작업에 매우 유용한 라이브러리이며, 다양한 차트나 UI 요소에 적용할 수 있습니다.

참고 자료: