-
Notifications
You must be signed in to change notification settings - Fork 0
/
10_bar_sort.html
166 lines (145 loc) · 4.48 KB
/
10_bar_sort.html
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample 15: 將SVG柱狀圖排序</title>
<script type="text/javascript" src="js/analytics.js"> </script>
<script type="text/javascript" src="js/d3.js" ></script>
<style type="text/css">
rect{
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
rect:hover{
fill:orange;
}
svg text{
pointer-events: none; /* bar上面的文字不觸發滑鼠event，如此，本例滑過bar上面的文字，bar也會觸發event */
}
</style>
</head>
<body>
<p>點擊圖表進行排序</p>
<script type="text/javascript">
var dataset;
var w = 1200, h = 300;
var xScale, yScale;
var svg4css, svg4js;
var sortAsc = false;
d3.csv("data/experimental.csv",function(error,data){
if(error){
console.log(error);
}else{
dataset = data;
console.log(data);
showChart();
modifysvg4js();
}
});
function modifysvg4js(){ /***重點*/
d3.selectAll("svg").selectAll("rect")
/*.on("mouseover",function(){ /***重點果滑鼠滑入滑出的效果也是用JS來做，這樣當click事件發生時，排序的轉場效果運行中，移動滑鼠觸發滑入滑出事件，則排序的轉場將被中斷，bar無法移到正確的位置上。所以滑入滑出的效果改為用CSS做
d3.select(this)
.attr("fill","orange");
})
.on("mouseout",function(d){
d3.select(this)
.transition()
.duration(250)
.attr("fill","rgb(0,0,"+d.CIE_grade_abcde+")");
})*/
.on("click", function(){
sortBars();
});
}
var sortBars = function(){ /***重點*/
sortAsc = !sortAsc;
svg4js.selectAll("rect")
.sort(function(a,b){
if (sortAsc){
//sortAsc = false;
return d3.ascending( parseInt(a.CIE_grade_abcde),parseInt(b.CIE_grade_abcde));
}else{
//sortAsc = true;
return d3.descending( parseInt(a.CIE_grade_abcde),parseInt(b.CIE_grade_abcde));
}
})
.transition()
.delay(function(d,i){
return i * 50;
})
.duration(1000)
.attr("x",function(d,i){
return xScale(i);
});
svg4js.selectAll("text")
.sort(function(a,b){
if (sortAsc){
return d3.ascending( parseInt(a.CIE_grade_abcde),parseInt(b.CIE_grade_abcde));
}else{
return d3.descending( parseInt(a.CIE_grade_abcde),parseInt(b.CIE_grade_abcde));
}
})
.transition()
.delay(function(d,i){
return i * 50;
})
.duration(1000)
.attr("x",function(d,i){
return xScale(i)+xScale.rangeBand()/2;
});
};
function showChart(){
xScale = d3.scale.ordinal() //建立序數尺度，例如：大一、大二或是初級、高級或是李克特量表。但本例dataset並沒有真正的序數型資料，不過可以讓長出來的長條按照dataset裡的順序
.domain(d3.range(dataset.length)) //設定序數尺度的輸入領域。例如：.domain(["初級","高級"])。d3.range(一個數值)可以生出0~該數值的資料矩陣。實務上，使用序數尺度不會用這樣的連續數字
.rangeRoundBands([0,w],0.05); //和rangeBand函式功能一樣，差別在於rangeRoundBands的輸出值會取最接近的整數
yScale = d3.scale.linear() //y這邊的設定成線性尺度，設定輸入領域最小和最大值，也設定輸出範圍最小和最大值
.domain([0,d3.max(dataset,function(d){ return parseInt(d.CIE_grade_abcde); })])
//.domain([0,200])
.range([0,h])
svg4js = d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
svg4js.selectAll("rect")
.data(dataset,key) //***重點。
.enter()
.append("rect")
.attr("x",function(d,i){
return xScale(i);
})
.attr("width",xScale.rangeBand())
.attr("y",function(d){
return (h- yScale(d.CIE_grade_abcde));
})
.attr("height", function(d){
return yScale(d.CIE_grade_abcde);
})
.attr("fill",function(d){
return "rgb(0,0,"+(d.CIE_grade_abcde)+")"
});
svg4js.selectAll("text")
.data(dataset,key) //***重點。
.enter()
.append("text")
.text(function(d){return d.CIE_grade_abcde;})
//.style("pointer-events","none") /***重點。和上面css設定的效果一樣*/
.attr("text-anchor","middle")
.attr("x",function(d,i){
return xScale(i)+xScale.rangeBand()/2;
})
.attr("y",function(d){
return (h - yScale(d.CIE_grade_abcde)) + 14;
})
.attr("font-family","sans-serif")
.attr("font-size","11px")
.attr("fill","white");
}
var key = function(d){ //***重點
return d.userId;
}
</script>
</body>
</html>