프로필사진
owgno6
CODELIB
검색하기
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total

티스토리 뷰

D3.js

03 그리드(Grid)

owgno6 2018. 6. 1. 10:14

이번에는 그리드기능을 추가해본다.

그리드는 값의 정확한 위치를 쉽게 볼 수 있게 사용되는 것으로

D3에서 tickSize 함수로 간단하게 구현할 수 있다.


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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
    border: 1px solid;
}
.bar {
    fill: orange;
}
.bar:hover {
    fill: tomato;
    cursor: pointer;
}
.text {
    fill: white;
    font-weight: bold;
}
.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}
</style>
<svg width="500" height="300"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
    var dataset = [ {x : 'A', y : 7}
                  , {x : 'B', y : 12}
                  , {x : 'C', y : 26}
                  , {x : 'D', y : 41}
                 , {x : 'E', y : 32}
                  , {x : 'F', y : 21}
                  , {x : 'G', y : 9}];
 
    var svg = d3.select("svg");
    var width  = parseInt(svg.style("width"), 10) -30;
    var height = parseInt(svg.style("height"), 10) -20;
    var svgG = svg.append("g")
        .attr("transform", "translate(30, 0)");
    var xScale = d3.scaleBand()
        .domain(dataset.map(function(d) { return d.x;} ))
        .range([0, width]).padding(0.2);
    var yScale = d3.scaleLinear()
        .domain([0, d3.max(dataset, function(d){ return d.y; })])
        .range([height, 0]);
 
    svgG.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
            .attr("class", "bar")
            .attr("height", function(d, i) {return height-yScale(d.y)})
            .attr("width", xScale.bandwidth())
            .attr("x", function(d, i) {return xScale(d.x)})
            .attr("y", function(d, i) {return yScale(d.y)});
 
    svgG.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d) {return d.y})
            .attr("class", "text")
            .attr("x", function(d, i) {return xScale(d.x)+xScale.bandwidth()/2})
            .style("text-anchor", "middle")
            .attr("y", function(d, i) {return yScale(d.y) + 15});
 
    svgG.append("g")
        .attr("class", "grid")
        .attr("transform", "translate(0," + (height) + ")")
        .call(d3.axisBottom(xScale)
                .tickSize(-height)
        );
 
    svgG.append("g")
        .attr("class", "grid")
        .call(d3.axisLeft(yScale)
                .ticks(5)
                .tickSize(-width)
        );
 
 
</script>
 
 
cs


구현방법은 코드에서 보듯이

차트 bar(도형) 뒤에

축을 그릴 떄 tick을 tickSize로 그리는 것이다.

따라서, 눈금의 크기를 차트 영역의

너비나 높이만큼 크게 그리면 된다.


[line 71, 78]

X축의 그리드선은

지정되 X좌표에  0부터 높이까지 이어진 선이다.

Y축은 0부터 너비까지 선이다.

따라서, X축의 경우 바닥(axisBottom)에 선을 그리기 때문에

기준이 바닥 0으로 부터 높이(height)이 된다.

Y축은 왼쪽(axisLeft)을 기준으로 설정했기 때문에

기준이 좌측 0부터 우측으로 시작되는 너비(width)가 된다.

축의 그리드 설정은 좌쪽으로는 +값, 우측은 -값으로 지정된다.


[line 18 ~ 22]

작성된 그리드 선에 대한 효과는 CSS로 지정한다. [line 68, 75].

CSS에서 선의 색상과 투명도를 설정해

차트를 보는데 좀 더 직관적으로 한다.




하지만, 차트를 보는데 다소 문제가 생겼다.

그리드가 도형보다 앞에 구현된 것.


설정한 CSS효과에서 제거하면 아래 그림과 같이 구현된다.



위그림과 같이 도형위에 선이 올려진 것.

그래서 소스코드에서 위치를 조정해서 바꿔보았다.


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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
    border: 1px solid;
}
.bar {
    fill: orange;
}
.bar:hover {
    fill: tomato;
    cursor: pointer;
}
.text {
    fill: white;
    font-weight: bold;
}
.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}
</style>
<svg width="500" height="300"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
    var dataset = [ {x : 'A', y : 7}
                  , {x : 'B', y : 12}
                  , {x : 'C', y : 26}
                  , {x : 'D', y : 41}
                  , {x : 'E', y : 32}
                  , {x : 'F', y : 21}
                  , {x : 'G', y : 9}];
 
    var svg = d3.select("svg");
    var width  = parseInt(svg.style("width"), 10) -30;
    var height = parseInt(svg.style("height"), 10) -20;
    var svgG = svg.append("g")
        .attr("transform", "translate(30, 0)");
    var xScale = d3.scaleBand()
        .domain(dataset.map(function(d) { return d.x;} ))
        .range([0, width]).padding(0.2);
    var yScale = d3.scaleLinear()
        .domain([0, d3.max(dataset, function(d){ return d.y; })])
        .range([height, 0]);
 
    svgG.append("g")
        .attr("class", "grid")
        .attr("transform", "translate(0," + (height) + ")")
           .call(d3.axisBottom(xScale)
                .tickSize(-height)
        );
 
    svgG.append("g")
        .attr("class", "grid")
        .call(d3.axisLeft(yScale)
                .ticks(5)
                .tickSize(-width)
        );
 
    svgG.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
            .attr("class", "bar")
            .attr("height", function(d, i) {return height-yScale(d.y)})
            .attr("width", xScale.bandwidth())
            .attr("x", function(d, i) {return xScale(d.x)})
            .attr("y", function(d, i) {return yScale(d.y)});
 
    svgG.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d) {return d.y})
            .attr("class", "text")
            .attr("x", function(d, i) {return xScale(d.x)+xScale.bandwidth()/2})
            .style("text-anchor", "middle")
            .attr("y", function(d, i) {return yScale(d.y) + 15});
 
 
 
 
</script>
cs


그리드를 다루는 svgG.append 부분을 

위로 옮겨 작성해서 먼저 읽어들이고, [line 47 ~ 59].

도형이나 텍스트를 다루는 svgG.selectAll 부분을 

아래로 내려서 나중에 읽어들이게 했다. [line 61 ~ 79].




소스코드의 위치를 변경한 후

그리드의 작성된 코드가 차트 도형을 생성하기전보다 출력되는데 성공했다.

그림과 같이 선위에 도형이 놓이게 된다.

그리드가 배경처럼 보이게 되어

전에는 선이 강조되었지만 지금은 도형이 강조된다.



후..

그런데 또 다른 문제가 생겼다.ㅜㅜ


위 그림을 보면 도형의 값인 text값이 사라졌다.



그래서 시행착오 끝에 

그룹(g)을 만들어서 문제를 해결할 수 있었다.


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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
    border: 1px solid;
}
.bar {
    fill: orange;
}
.bar:hover {
    fill: tomato;
    cursor: pointer;
}
.text {
    fill: white;
    font-weight: bold;
}
.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}
</style>
<svg width="500" height="300"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
    var dataset = [ {x : 'A', y : 7}
                  , {x : 'B', y : 12}
                  , {x : 'C', y : 26}
                  , {x : 'D', y : 41}
                  , {x : 'E', y : 32}
                  , {x : 'F', y : 21}
                  , {x : 'G', y : 9}];
 
    var svg = d3.select("svg");
    var width  = parseInt(svg.style("width"), 10) -30;
    var height = parseInt(svg.style("height"), 10) -20;
    var svgG = svg.append("g")
        .attr("transform", "translate(30, 0)");
    var xScale = d3.scaleBand()
        .domain(dataset.map(function(d) { return d.x;} ))
        .range([0, width]).padding(0.2);
    var yScale = d3.scaleLinear()
        .domain([0, d3.max(dataset, function(d){ return d.y; })])
        .range([height, 0]);
 
    svgG.append("g")
        .attr("class", "grid")
        .attr("transform", "translate(0," + (height) + ")")
           .call(d3.axisBottom(xScale)
                .tickSize(-height)
        );
 
    svgG.append("g")
        .attr("class", "grid")
        .call(d3.axisLeft(yScale)
                .ticks(5)
                .tickSize(-width)
        );
 
    var barG = svgG.append("g");
 
    barG.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
            .attr("class", "bar")
            .attr("height", function(d, i) {return height-yScale(d.y)})
            .attr("width", xScale.bandwidth())
            .attr("x", function(d, i) {return xScale(d.x)})
            .attr("y", function(d, i) {return yScale(d.y)});
 
    barG.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d) {return d.y})
            .attr("class", "text")
            .attr("x", function(d, i) {return xScale(d.x)+xScale.bandwidth()/2})
            .style("text-anchor", "middle")
            .attr("y", function(d, i) {return yScale(d.y) + 15});
 
 
 
 
</script>
cs


눈금과 그리드를 다루는 부분을 그룹(g)을 지어 [line 61].

도형과 텍스트 부분에 해당 변수(barG)를 넣었다.  [line 63, 73]


전에 척도를 다룰때도 문제점이 생길때 

그룹(g)으로 해결이 가능했었는데

이번 그리드에서도 그룹(g)이 사용됐다.





'D3.js' 카테고리의 다른 글

06 라인 차트(Line Chart) - 툴팁(Tooltip), 꺾은선(Curve Line)  (0) 2018.06.11
05 라인 차트(Line Chart)  (0) 2018.06.05
04 툴팁(Tooltip)  (2) 2018.06.04
02 척도(X / Y축) - Axis와 Scale의 이해  (0) 2018.05.30
01 간단한 도형 차트(Bar Chart) 만들기  (1) 2018.05.25
공유하기 링크
댓글