데이터를 이용해서 차트를 만들어보자.
먼저 예시 코드를 보며 이해해보자
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style>
display: inline-block;
width: 20px;
height: 75px;
margin-right: 4px;
background-color: teal;
}
div.bar2{
display: inline-block;
width:15px;
height:75px;
margin-right:2px;
background-color:red;
}
</style>
</head>
<body>
<script>
var data = [5, 10, 8, 20, 25,21,1,33,50,12];
var data2 = [];
for (var i = 0; i < 25; i++) {
console.log(data2[i]);
}
.data(data) // 받은 데이터 집합이 무엇이든 간에 그 개수만큼 알아서 순회하고 체인(.)으로 연결된 뒤쪽 메서드를 실행해줌
.enter() // 데이터가 시각화를 결정해준다!!
.append("div")
.attr('class', 'bar')
.style("height", function (d) {
var hh = d * 3;
return hh + "px"; //'px'을 리턴값으로 가지게 됨!!
});//
//attr 은 문서요소에 HTML속성과 값을 지정할때 사용, 5개의 막대가 붙여서 들어옴,
//style메서드는 직접 CSS 프로퍼티와 값을 지정할 떄 사용가능.
.data(data2) // 난수를 통해 25개의 데이터를 받음
.enter()
.append("div")
.attr('class', 'bar2')
.style("height", function (d) {
var hh = d * 5;
return hh + "px";
});
</script>
<!-- <div class="bar"></div> -->
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
이곳에서 CSS스타일 코드와 HTML코드를 다루지는 않겠다.
CSS스타일을 적용하여 막대차트의 막대차트의 높이, 너비 각 막대사이의 거리를 조절해준다.
CSS스타일이 없다면 모든막대가 붙어있는 모습을 볼 수 있을 것이다.
d3코드중 아래의 코드를 보자
d3.select("body").selectAll("div")
.data(data2) // 난수를 통해 25개의 데이터를 받음
.enter()
.append("div")
.attr('class', 'bar2')
.style("height", function (d) {
var hh = d * 5;
return hh + "px";
});
위의 코드를 하나씩 보면 'body' 에 'div' 태그를 모두 선택하였다. 이제 body의 div태그에 메서드체인을 통해 chart를 그릴것이다.
data(data2)
data2를 위에서 찾아보면 임의의값을 랜덤으로 주고 있다. 새로고침하여 값이 계속 변경됨을 볼 수 있을것이다. 자바스크립트의 Math.floor()와 Math.random()함수를 통해 data2 배열에 push한다.
enter()
새로운 문서요소를 생성하기 위해 빈 플레이스 홀더를 생성한다. 이후 체인으로 연결된 다음 메서드를 위해 참조값을 넘긴다.
append('div')
enter메서드가 생성한 빈 플레이스 홀더 선택물을 가져와서 DOM문서에 div 문서요소를 추가한다.
attr('class','bar2)
속성을 추가할때 사용한다. 클래스이름이 bar2 인 속성을 적용할 것이다. bar2의 속성은 위에서 참고하자
style('..' , function(d))
style을 추가하는 메서드이다. 이미 우리는 bar2클래스에서 style의 'height'를 75px로 모두 일정하게 만들어 놓았다. 이것을 수정하지 않고 실행한다면 모두 똑같은 높이를 가진 chart가 그려질 것이다.
우리가 원하는것은 data2에서 받은 값에 따라 높이를 달리해야한다. 이를 위해 style의 'height'값을 익명함수를 통해 수정해야한다.
익명함수가 return하는것을 보면 d(각 데이터의 값) 에 * 5를 한 값이다. 이를 통해 높이가 값에 따라 다른 결과를 볼 수 있다. 실행결과를 보면 확인해보자.
우측의 빨간색 결과가 위에서 설명한 코드의 결과이다. bar2 클래스의 CSS스타일을 잘 적용하여 나타난다. 이 chart의 실제 값을 보자.
자 코드의 결과를 보면 div 태그에 클래스이름이 bar2의 속성을 가진 데이터들이 나왔다.
갯수가 25개가 아닌 이유는 현재 위의 'data'와 'bar' 클래스 즉, 녹색 차트에 의해 가려져서 차트가 보이지 않는다. 녹색 차트를 지우고 실행하면 25개의 데이터가 빨간색 차트로 보일것이다.
console의 값에 5배를 한 px값이 height로 적용됨을 볼 수 있다.
'D3_js' 카테고리의 다른 글
| [D3.js] 척도 (0) | 2019.08.03 |
|---|---|
| [D3.js] Scatter_산포도 (0) | 2019.07.25 |
| [D3.js] SVG를 이용한 Chart와 Circle (0) | 2019.07.19 |
| [D3.js] DOM 문서요소 선택하기 (0) | 2019.07.15 |
| [D3.js] Data_driven_Document (0) | 2019.07.10 |