D3.js란?
D3.js 는 자바스크립트 기반의 대화형 데이터 시각화를 만드는 라이브러리다.
D3는 Data-Driven Documents 의 약자로 웹에서 데이터 시각화 프레임워크를 구축 한다.
html문서의 svg객체로 표현되며 css로 디자인적인 요소를 조절하고 자바스크립트를 이용해서 조작할 수 있다.
D3를 사용하면 쉽고 편리하게 svg 차트를 만들 수 있습니다.
D3.js 사용방법
1. 공식사이트에서 다운받아서 폴더에 직접 넣어서 사용하기
아래 사이트에서 d3.js를 내려 받을 수 있다.
D3.js - Data-Driven Documents
D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS.
d3js.org
사이트에 들어가면 Download the latest version(7.1.1) here: 아래 링크를 클릭해서 다운로드 하면된다.
만약 전체 소스와 테스트를 다운받고 싶다면 상단에 Source 메뉴를 클릭해서 깃허브에서 다운 받을 수 있다.
2. CDN으로 연결하기
<script src="https://d3js.org/d3.v7.min.js"></script>
D3.js를 사용하는 이유
- 매우 유연하다.
- 사용하기 쉽고 빠르다.
- 대규모의 데이터 세트를 지원한다.
- 선언적 접근 방식을 사용한다.
- 코드이 재사용성
- 다양한 곡선을 만드는 기능이 있다.
- 데이터를 html페이지에 연결한다.
※ D3는 보통 데이터형식으로 JSON을 사용하는데 이 때 로컬에서 실행하면 자바스크립트 보안 정책으로 안하여 크로스브라우징 이슈 문제로 실행 되지 않는다. 따라서 JSON파일을 사용하게 되면 node나 톰캣을 이용하여 실행하는것이 좋다.
D3 기본문법
- d3.select : 현재 문서에서 문서요소 하나를 선택
- d3.selectAll : 현재 문서에서 문서요소 여러개를 선택한다.
- selection.attr : 속성값을 지정하거나 가져온다.
- selection.style : css 스타일 프로퍼티를 지정하거나 가져온다.
- selection.data : 데이터를 문서요소에 가져온다.
- selection.enter : 부족한 문서요소를 데이터 개수 만큼 추가한다. 데이터 개수에 맞게 태그를 추가함
- selection.append : 새로운 태그를 추가한다.
자세한 사항은 아래 링크로 들어가서 API Reference를 참조할 수 있다.
https://github.com/zziuni/d3/wiki/API-Reference
GitHub - zziuni/d3: D3.js API Doc Translated to korean.
D3.js API Doc Translated to korean. . Contribute to zziuni/d3 development by creating an account on GitHub.
github.com
d3.js 사용하기
아래와 같은 자바스크립트는
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.style.setProperty("color", "blue", null);
}
d3.js를 사용하여 이렇게 간단하게 표현할 수 있다.
d3.selectAll("p").style("color", "blue");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>d3</title>
<script src="js/d3.min.js"></script>
</head>
<body>
<p>
d3 test
</p>
<script>
d3.selectAll("p").style("color", "blue");
</script>
</body>
</html>위 와 같이 적용하면 간단하게 색상 값이 blue로 변한걸 확인 할 수 있다.
만약 랜덤으로 색상을 지정하고 싶다면?
d3.selectAll("p").style("color", function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
});새로고침 할때마다 텍스트 색상이 변하는걸 확인할 수 있다.
※ 참초 https://d3js.org/#selections
'Front-end > chart.js & d3.js' 카테고리의 다른 글
| chart.js 포인터 이미지로 변경하기 (0) | 2022.01.18 |
|---|---|
| chart.js 포인터 모양 변경하기 (0) | 2022.01.17 |
| chart.js 크기 고정 방법 (2) | 2022.01.15 |
| Chart.js 사용법 (0) | 2022.01.14 |
| Chart.js 시작하기 (0) | 2022.01.10 |
댓글