D3.js는 다음과 같은 차트를 만드는데 유용합니다.
막대 차트
원 차트
파이 차트
도넛 형 차트
선 차트
버블 차트
막대 차트는 개별 범주, 그룹의 수, 빈도, 평균 표시하고 비교할 때 사용합니다.
막대 높이 길이가 범주의 크기이겠죠.
x축은 범주 y축은 눈금이 있고 측정 단위를 나타냅니다.
막대형 차트는 rect를 이용하여 그려줍니다.
1단계 : rect요소 스타일 지정해주기.
svg rect {
fill: gray;
}위 css으로 rect 스타일을 지정해줍니다. 즉 회색으로 색칠 해준다는 뜻이죠.
2단계 : 텍스트 요소에 스타일을 지정해주기.
svg text {
fill: yellow;
font: 12px sans-serif;
text-anchor: end;
}위 css으로 text 스타일을 지정해줍니다. 색은 노란색, 크기는 12px 글씨체는 sans-serif
text 바의 오른쪽 끝에 배치하는 text-anchor를 지정해줍니다.
3단계 : 스크립트에 변수 정의하기.
<script>
var data = [10, 5, 12, 15];
var width = 300,
scaleFactor = 20,
barHeight = 30;
</script>우선 스크립트에 사용할 data변수를 넣어주고
svg의 너비는 300, 스크린에 보이는 픽셀 값으로 스케일이 되는 scaleFactor를 20으로
막대 높이는 30으로 지정해줍니다.
4단계 : SVG 요소를 추가해주기.
d3에 svg 요소를 추가해줍니다.
var graph = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);즉 body태그를 선택해주고 svg를 넣어주며 이때 SVG의 속성은 위에서 정의한 변수의 값을 넣어줍니다.
SVG의 높이는 막대 높이 X 데이터 수(30 X 4 = 120)
SVG 높이는 막대가 모두 들어와야 하기 때문에 총 4개의 막대가 각각 높이가 30이므로 총 120이 필요한거죠.
쉽게 쉽게 생각합시다.
너비는 300으로 지정해줍니다.
5단계 : 변환을 적용해주기.
바에 변환을 적용해줍니다.
var bar = graph.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * barHeight + ")";
});svg요소 내 그룹을 만들어줍니다.
각 그룹 요소는 수평 막대 차트를 서로 아래에 위치시킵니다.
즉 하나의 공식인 인덱스 X 바 높이를 사용해줍니다.
각 막대가 서로 위 아래로 배치시켜야 하므로 바의 높이는 30인데 이를 인덱스로 곱해주어서
변환을 시켜주는거죠.
즉 처음엔 0 -> 30 -> 60 -> 120 ->.....
그러면 바 높이는 각각 위에 처럼 변환이 되어 서로 위 아래로 위치시킬 수 있겠죠?
6단계 : 바에 rect 추가하기.
rect요소를 만들어준 bar에 적용시켜줍니다.
bar.append("rect")
.attr("width", function(d) {
return d * scaleFactor;
})
.attr("height", barHeight - 1);즉 bar에 rect를 append하고 너비 속성은 데이터 값(d)에 정의해준 scaleFactor(20)을 곱해줍니다.
즉 너비라는 것은 각 비교를 해줄 수있는 바의 너비인 수평 바의 높낮이 입니다.
쉽게 말해 10하고 2는 막대가 10이 좌우로 더 길고 2가 더 짧겠죠.
높이는 여백 1을 빼줍니다. 서로 위아래로 공간은 있어야겠죠....
7단계 : 데이터를 표시해준다!!!(마지막 단계임)
드디어 막대차트의 막단계입니다.
각 막대에 수치를 적용시켜주는거죠. 사용자들이 보기 쉽게 ㅎㅎ
bar.append("text")
.attr("x", function(d) { return (d*scaleFactor); })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });rect를 적용해준 bar에 또 text를 append하여 text의 위치를 해당 수치값(막대 끝) x좌표로 줍니다.
그리고 텍스트의 높이는 바 높이(30)의 절반!! 15로 줍니다.
중요한 건 텍스트는 여백을 지원하지 않기 때문에 저희가 임의로 여백을 지정해줘야합니다.
즉 offset을 넣어주기위해서 dy에 .35em을 적용해줍니다.(텍스트 새로정렬)
<전체 코드>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
svg rect {
fill: gray;
}
svg text {
fill: yellow;
font: 12px sans-serif;
text-anchor: end;
}
</style>
</head>
<body>
<script>
var data = [10, 5, 12, 15];
var width = 300
scaleFactor = 20,
barHeight = 30;
var graph = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
var bar = graph.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * barHeight + ")";
});
bar.append("rect").attr("width", function(d) {
return d * scaleFactor;
})
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { return (d*scaleFactor); })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
</script>
</body>
</html>
<결과 화면>
'웹 > JavaScript,JQurey' 카테고리의 다른 글
| 자바스크립트-틱택토 게임 (0) | 2019.07.22 |
|---|---|
| 자바스크립트- 구구단 게임 (0) | 2019.07.21 |
| D3.js 공부 8 - 에니메이션 (0) | 2019.04.16 |
| D3.js 공부 7 - transition(전환) (0) | 2019.04.10 |
| D3.js 공부 6 - SVG 변환 (0) | 2019.04.10 |
