D3.js 란?

Yoon·2021년 8월 6일
0

Javascript

목록 보기
8/8

D3.js

  • Data - Driven Documents. JavaScript
  • 동적이고 인터랙티브한 데이터 시각화가 가능한 프레임워크
  • 데이터 중심의 문서(Data - Driven Documents)의 약자로 js 기반의 라이브러리 언어이다.
  • 사용자가 입력한 '시각화 규칙을 바탕'으로 데이터를 반영해 시각화 결과물을 생성한다.
  • 완전히 오픈소스이다.
  • HTML5의 SVG(Scalable Vector Graphic)을 통하여 다양한 화면 해상도에서도 깨짐없는 시각화가 가능하다.
  • 각종 차트에 필요한 기능들을 함수 단위로 제공한다.

공식 사이트

동작 과정

  1. Loading : 시각적 요소를 그리기 전 보여주고자 하는 데이터를 불러온다.
  2. Selecting-Binding : 작업할 공간을 선택하고, 시각적 요소 안에 데이터 수치를 입력한 코드에 맞춰 연결(바인딩)한다.
  3. Transfrom : graph의 유형, 색상, 축 등 다양한 요소를 지정한다.
  4. Transition : 클릭, 드래그 등 인터랙션 효과 지정
  • D3는 보통 데이터 형식으로 JSON 형식을 많이 사용하는데 이때 서버의 동작없이 로컬환경에서 실행하면 자바스크립트의 보안 정책으로 인해 크로스 브라우징 이슈 문제가 생겨 실행되지 않는다.
  • D3를 환경 설정 - d3.js 파일 다운받아 사용하거나 cdn으로 한 줄만 가져오면 된다.

기본적인 method

  • d3.select()
    특정 태그 하나를 선택한다.

  • d3.selectAll()
    특정 태그 전체를 선택한다.

  • selection.attr()
    선택태그의 속성값을 지정한다.

  • selection.data()
    차트에 사용할 데이터를 가져온다. 선택된 태그에 대한 데이터 매칭

  • selection.enter()
    태그가 데이터 개수보다 부족할 때 추가한다. 부족한 개수만큼 플레이스 홀더를 반환.

  • selection.append()
    새로운 태그를 추가한다.

  • selection.exit()
    종료한다.(더 이상 필요없는 태그 반환)

  • selection.remove()
    선택된 태그를 제거한다.

var dataset = [ 5, 10, 15, 20, 25 ]; 

d3.select("body")          // body 요소 선택
  .selectAll("p")          // p태그를 가진 요소를 선택
  .data(dataset)           // 해당 태그와 dataset을 바인딩
  .enter()                 // 바인딩 되지 못하고 남은 녀석들의 selection 객체 반환
  .append("p")             // 해당 객체에 p라는 태그를 더 붙임
  .text("New p!"); // 이 새로운 요소에 "New p!" 라는 text 추가

<이미지 출처 : https://www.slideshare.net/aliceinwoon/d3js-2 >

References :
https://velog.io/@smooth97/-Data-Visualizing-D3.js-%EB%9E%80
https://cyberx.tistory.com/211

d3 사용법을 알기위한 튜토리얼 예제 분석

d3+react

profile
FE Developer✨

0개의 댓글