0615 D3.js의 기본
D3.js로 그래프 그리기
1. D3.js의 기본적인 흐름
D3.js로 만들 그래프의 프로그램 구조는 다음과 같다
1) 데이터 읽어 들이기
2) 표시할 그래프 지정
3) 그래프를 그리는데 필요한 SVG 도형 요소 준비
4) 요소의 속성값 변경
5) 필요시, 애니메이션 처리
6) 필요시, 이벤트에 따른 처리
1) 데이터 읽어 들이기
D3.js에서는 csv(반점으로 구분된 텍스트)나 tsv(탭으로 구문된 텍스트), xml 형식 등 주요 데이터 형식을 읽어 들일 수 있다.
또한, 프로그램 안에서는 배열이나 JSON 데이터도 이용 할 수 있다.
2) 표시할 그래프의 지정입니다만,
D3.js는 데이터로 부터 그래프를 표시해야 할 좌표를 계산하여 반환합니다.
이 계산을 수행하고자 D3.js의 레이아웃 객체를 지정합니다. 직접 데이터를 해석하여 프로그램을 작성하여 처리 할 수도 있습니다만, 원 그래프나 트리맵 등은 D3.js에 있는 객체를 이용하여 게산하는 것이 훨씬 편리 합니다.
3) 그래프를 표시 할 때 D3.js에서는 일반적인 SVG 요소를 생성합니다. DOM 요소나 Canavas 요소도 생성할 수 있습니다만, D3.js에서는 데이터 수에 따라 자동으로 요소의 수를 변경하여 애니메이션을 적용 할 수 있는데,
이럴때는 SVG를 이용하는 것이 효과적입니다.
이 장에서는 막대그래프를 표시하고자 SVG의 rect 요소(사각형)를 사용합니다.
4) 요소의 속성값을 변경하는 처리는 아주 중요합니다. 그래프를 어떻게 표시할 것인가가 여기서 결정되기 때문입니다
D3.js 에서는 속성값을 변경하는 attr()메서드와 스타일을 변경하는 style()메서드의 두가지만 기억하면 충분합니다.
속성값과 스타일만을 변경할 것이므로 attr() 메서드와 style()메서드 만으로도 충분합니다.
5) D3.js에서는 무척 간단하게 애니메이션을 적용할 수 있습니다.
transition() 메서드 뒤에 변경하고자 하는 속성값을 지정하기만 하면 되므로 간단하게 만들 수 있습니다.
6) d3.js는 마우스 클릭 등의 이벤트에 따라 그래프를 변화시킬 수 있습니다. 이벤트는 on()메서드를 사용하여 처리합니다. ㅏ이미 jQurey라이브러리를 사용해본적이 있으시다면 같은 메서드에 같은 서식이므로 사용하는데 전혀 어려움이 없을 것입니다.
===============================
2. d3.js를 사용하여 가로형 막대 그래프를 표시
===============================
2.1 HTML 준비
먼저 D3.js 라이브러리를 읽어들일 필요가 있습니다. 라이브러리를 먼저 읽어들이지 않으면 그래프가 표시되지 않습니다.
D3.js 라이브러리를 읽어들일 때는 script 요소를 사용하여 다음과 같이 기술 합니다.
D3.js 라이브러리 읽어들이기
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8">
</script>
직접 D3.js 서버로부터 읽어들일때는 이렇게 작성
물론 라이브러리를 내려받아 이용할 수 도 있습니다.
다음으로 그래프를 표시하고자 하는 영역을 준비합니다.
그래프 표시에는 svg를 사용합니다.
SVG 도형을 표시하고자 미리 HTML 파일 안에 다음과 같이 svg 요소를 기술해 둡니다.
그래프를 표시하기 위한 영역 준비
<svg id="myGraph"></svg>
프로그램에서 이 svg 요소를 조작할 수 있도록id 속성에는 'MyGraph'를 지정합니다.
그 다음 D3.js로 그래프를 표시할 프로그램을 작성하도록 합니다.
이후 설명할 프로그램은 모두 별도의 파일로 작성하여 js 폴더 안의 sample.js라는 파일 이름으로 저장하도록 하겠습니다.
이 파일을 읽어들여 실행하고자 다음과 같이 script 요소를 기술합니다.
<script src="js/sample.js"></script>
2.2 그래프 데이터 준비
그래프 데이터가 여러개 모인 것을 데이터 셋이라고 부릅니다.
자바 스크립트의 배열을 이용하여 데이터 셋을 준비
데이터 셋 준비
var dataSet = [300, 130, 5, 60, 240];
2.3 HTML 파일 안에서 SVG로 사각형 그리기
GSVG는 HTML 파일안의 SVG 요소 안에 기술합니다. SVG요소 안에 기술하지 않으면 사각형으로 표시되지 않습니다.
이것은 사각형에만 한정된 것이 아니라 SVG로 도형을 표시하는 요소는 모두 마찬가지입니다.
SVG로 사각형을 그리려면 rect 요소를 사용합니다. rect 요소에서는 다음과 같은 속성을 이용하여 사각형을 그립니다.
[rect 요소]
<rect x="X좌표", y="Y 좌표" width = "넓이" height = "높이" />
x,y, width, height 속성값을 모두 설정하지 안흥면 사각형이 표시되지 않습니다. D3.js에서 막대그래프를 표시할 때는 rect 요소를 생성하고 이 4개의 속성에 값을 설정하는 것이 됩니다.
더불어 svg의 좌표계는 일반적으로 컴퓨터에서 사용하는 좌표계와 마찬가지이므로 왼쪽 위가 원점이 되며 오른쪽 아래로 갈수록 좌표값이 커지게 됩니다.
실제로 rect 요소를 기술한 HTML 파일은 다음과 같이 됩니다.
# 아래 택스트를 메모장에서 작성하고 sample.html로 저장하면 익스플로어로 확인 됨
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> SVG Sample</title>
</head>
<body>
<svg>
<rect x="10" y="30" width="100" height="80" />
</svg>
</body>
</html>