D3.js란?
안녕하세요. 자바스크립트 라이브러리 중 하나인 D3.js에 대해서 소개해드리려고 합니다.
D3.js란 자바스크립트 라이브러리를 처음 들어보신 분도 또는 자주 사용해보셨던 분들도 계시겠지만, 이번에는 처음 접해보시는 분들을 위해 조금 자세하고 쉽게 설명해드리도록 하겠습니다.
(이미 자주 사용하시고 저보다 더 많은 지식을 알고 계시는 분들에게 미리 양해 말씀드립니다^^)
우선 D3는(D3.js를 줄여서 D3라고 함) 완전히 오픈소스이며, Data-Driven-Documents의 약자로 D가 연속으로 3번 들어가서 일명 D3라는 명칭으로 부르며, 웹브라우저상에서 동적이고 인터렉티브한 정보시각화를 구현하기 위한 자바스크립트 라이브러리입니다. D3의 장점은 새로운 언어 형태가 아니라 자바스크립트 문법을 취하고 있으며, 웹 표준인 HTML, SVG, CSS에서 파생되었기 때문에 쉽게 접근이 가능하며, 각종 차트에 필요한 기능들을 함수 단위로 제공해준다는 점입니다. 무엇보다 좋은 점은 D3는 브라우저 내장 요소 검사기를 활용해서 쉽게 디버깅을 할 수 있다는 것입니다.
또한 D3는 2012년 8월에 2 버전이 출시되었고 2016년에 4버전, 현재는 5버전이 출시된 상태이지만 현재 공식 사이트( https://d3js.org )를 보면 대부분의 차트들이 3버전으로 되어있다는 걸 확인하실 수 있습니다.
더 자세한 내용이 궁금하시다면 D3 공식 사이트( https://d3js.org )를 참고 바랍니다.
이제 D3가 어떤 라이브러리 인지 대충 감이 오시죠??
어떤 라이브러리인지 감이 오셨다면 이제 한번 사용해보도록 하겠습니다.
D3 환경 세팅
D3 환경 세팅을 하는 방법에는 두 가지가 있습니다.
첫 번째는, 공식사이트( https://d3js.org/ )에서 D3를 다운받아 폴더에 직접 넣는 방법이 있습니다.
두 번째는, 아래와 같이 CDN방식으로 D3를 사용하는 방법이 있습니다.
두 가지 방법 중 편한 방법을 선택해서 사용하게 되면 D3를 사용할 수 있는 기본적인 환경 세팅이 완료되며 두 번째 방법인 CDN 방식은 네트워크 연결이 끊기게 되면 D3를 사용할 수 없기 때문에 첫 번째 방법을 조심스럽게 추천해 드립니다.
앗… 한가지 중요한 걸 깜빡했네요…
우선 보여드리는 예제는 3버전으로 진행되며, D3는 보통 데이터 형식으로 JSON 형식을 많이 사용하게 되는데 이때 서버의 동작 없이 로컬환경에서 실행하게 된다면 자바스크립트의 보안정책으로 인해 크로스 브라우징 이슈 문제가 생겨 실행 되지 않습니다….
이점 참고하여 JSON 파일을 사용하게 된다면 node나 tomcat 등을 이용하여 실행하시길 권장 드립니다.
D3 기본 문법
D3를 사용하려면 기본 문법은 알고 있어야겟죠???
● d3.select – 특정 태그 하나를 선택한다.
● d3.selectAll – 특정 태그 전체를 선택한다.
● selection.attr – 선택 태그의 속성값 지정한다.
● selection.data – 집어넣을 즉 차트에 사용할 데이터를 가져온다.
● selection.enter – 데이터 개수만큼 태그가 부족할 시에 추가한다.(ex 데이터가 5개, p태그가 3개일시 데이터 개수에 맞게 p태그 2개를 더 추가한다.)
● selection.append – 새로운 태그를 추가한다.
위의 6가지 문법은 D3를 사용하는데 있어 가장 기본적인 문법이며 더 많은 D3문법은 다음 API사이트( https://github.com/zziuni/d3/wiki/API-Reference )를 참고바랍니다.
D3 기본 차트 그리기1
한눈에 이해가 가시나요?? 이해가 한 번에 되지 않을 수도 있기 때문에 라인별로 자세하게 설명해드리도록 하겠습니다.
10라인을 보시면 우선 높이와 넓이가 500인 SVG 태그를 하나 생성합니다.
11라인은 D3를 사용하기 위해 CDN 방식을 사용하였습니다.
13라인은 차트에 사용할 데이터를 배열 형태로 미리 만들어 놓습니다.
(간단한 예제이기 때문에 다음과 같이 배열 형태로 만들어 두었지만, 나중에 더 복잡한 차트를 만들기 위해서는 보통 데이터를 JSON 형식으로 만들어 사용하며 이 JSON 데이터를 parsing 해서 사용하게 됩니다.)
15라인은 d3의 문법 중 하나이며 SVG 라는 태그를 선택하라는 의미입니다.
17~22라인을 보시면 data 배열의 수 만큼 반복문을 실행하며, d3의 기본 문법을 이용하여 배열 안의 데이터 개수만큼 사각형 모양의 차트를 생성하게 됩니다. 자세히 보시면 jQuery처럼 d3가 기본적으로 체이닝 기법을 사용한다는걸 알 수 있겠죠?,
자 이제 코드를 작성했으니 결과물을 확인해 봐야겠죠??
D3의 기본 문법을 이용하여 기본적인 막대차트를 그려 보았습니다. 간단한 문법만으로 차트 생성이 되었죠??
결과물은 화면에 잘 출력이 되었지만, 혹시 여기서 의문점이 생기신 분들 계신가요?? 의문점이 생긴다면 D3의 기본 개념에 대해서 잘 이해하고 계신다는 겁니다. 위의 코드는 자바스크립트의 문법인 forEach 구문을 이용하여 도형을 생성했는데 이것은 D3의 장점이 아닙니다. D3는 데이터 기반으로, 쉽게 데이터를 처리하는 것이 목적이기 때문이죠.
그럼 D3의 장점을 살려서 코드를 다시 작성해볼까요??
D3 기본 차트 그리기2
위의 코드가 D3의 장점을 살려서 새롭게 작성한 코드입니다.
기존의 자바스크립트 코드인 반복문을 이용하지 않고 .data() 안에 사용할 데이터를 넣어 지정하고 각 데이터별로 enter()를 실행해서 도형을 생성하게 됩니다. 또한, 데이터를 가가져오는 방식을 배열로 지정할 수도 있고 위의 코드와 같이 함수의 파라미터로 넘어오는 값을 사용할 수도 있습니다.
D3 기본 차트 그리기3(디자인)
그럼 다음은 좀 더 발전된 차트를 그려 보기 전에 차트에 디자인을 좀 해줘야겠죠??
어느 부분이 달라졌는지 파악하셨나요??
14라인에 color라는 새로운 배열이 생겼고, 22라인에 fill이라는 새로운 것이 생겼습니다.
무슨 기능인지 알아볼까요??
우선 D3의 fill은 CSS의 background-color와 같은 기능을 합니다. 또한 선, 즉 테두리의 스타일을 입히고 싶은 경우에는 stroke를 사용하게 됩니다.
이외에도 D3에서 사용하는 고유 CSS 문법이 있지만 자세한 건 D3 공식문서나 github에 방문하셔서 확인해 보시는걸 권장해 드립니다.
다시 코드로 돌아가서 22번째 라인에서 rect 차트에 color 배열 안에 있는 색상을 적용합니다. 디자인은 CSS 파일을 따로 작성하여 연결하는 게 가장 좋은 방법이지만 D3에서는 다음과 같이 인라인 스타일로 직접 넣어주는 방식으로도 사용이 가능하다는 걸 보여드리기 위해 다음과 같은 방법을 사용하였습니다.
자 이제 결과물을 볼까요?????
이전 차트보다 좀 더 화려해졌죠???
그럼 다음 글에서는 D3로 또 다른 형태의 차트를 구현해 보는 시간을 갖도록 하겠습니다.
D3.js에 대한 더 자세한 내용을 살펴보고 싶다면, 아래 링크를 클릭해주세요.
▶ D3.js를 이용하여 웹차트 만들기2 - 파이그래프
'프론트엔드' 카테고리의 다른 글
| Flutter (0) | 2020.05.07 |
|---|---|
| D3.js를 이용하여 웹차트 만들기2 - 파이그래프 (1) | 2019.06.05 |
| Java Web Application 에서의 Angular 개발환경 구성 및 배포 (0) | 2019.05.23 |
| 일렉트론 개발환경 구축하기 (1) | 2019.05.03 |
| Electron 개념정리 (0) | 2019.04.11 |