/
19.RWD.html
223 lines (179 loc) · 6.67 KB
/
19.RWD.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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
---
title: 圖表RWD
layout: ./app/layout.ejs
engine: ejs
current: index
---
<style>
.RWDChart{
width: 80%;
min-width: 300px;
/* margin: auto; */
}
</style>
<h1 class="text-center fw-bold">Responsive Charts 響應式圖表</h1>
<h4 class="mt-3">1. 固定寬高的圖表</h4>
<div class="simpleChart"></div>
<h4 class="mt-3">2. 響應式圖表</h4>
<div class="RWDChart"></div>
<h4 class="mt-3">3. 刻度隨畫面大小增減</h4>
<div class="RWDTicks"></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
// 固定
function simpleChart(){
const width = 500,
height = 400,
margin = 30,
bandWidth = 20
const svg = d3.select('.simpleChart')
.append('svg')
.attr('width', width)
.attr('height', height)
//data
const data = [{x:100, y:20}, {x:18, y:30}, {x:90, y:250}]
// map 資料集
xData = data.map((i) => i.x);
yData = data.map((i) => i.y);
// 設定要給 X 軸用的 scale 跟 axis
const xScale = d3.scaleLinear()
.domain([0, d3.max(xData)+20])
.range([margin, width - margin]); // 寬度
const xAxis = d3.axisBottom(xScale)
.ticks(5)
// .tickValues(xData)
.tickFormat(function (d) {
//調整標籤樣式
return `${d} 元`;
})
// 呼叫繪製x軸、調整x軸位置
const xAxisGroup = svg.append("g")
.call(xAxis)
.attr("transform", `translate(0,${height - margin})`)
// 設定要給 Y 軸用的 scale 跟 axis
const yScale = d3.scaleLinear()
.domain([0, d3.max(yData)])
.range([height - margin, margin]); // 數值要顛倒，才會從低往高排
const yAxis = d3.axisLeft(yScale)
.ticks(5)
// 呼叫繪製y軸、調整y軸位置
const yAxisGroup = svg.append("g")
.call(yAxis)
.attr("transform", `translate(${margin},0)`)
// 開始建立長條圖
svg.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => xScale(d.x) - (bandWidth/2)) // 讓長條圖在刻度線中間
.attr("y", d => yScale(d.y))
.attr("width", bandWidth)
.attr("height", d => (height - margin) - yScale(d.y))
.attr("fill", "#69b3a2")
}
simpleChart()
// RWD
function RWDChart(){
// 刪除原本的svg.charts，重新渲染改變寬度的svg
d3.select('.RWDChart svg').remove();
// RWD 的svg 寬高
const rwdSvgWidth = parseInt(d3.select('.RWDChart').style('width')),
rwdSvgHeight = rwdSvgWidth*0.8,
margin = 30,
bandWidth = 20
const svg = d3.select('.RWDChart')
.append('svg')
.attr('width', rwdSvgWidth)
.attr('height', rwdSvgHeight);
//data
const data = [{x:100, y:20}, {x:18, y:30}, {x:90, y:250}]
// map 資料集
xData = data.map((i) => i.x);
yData = data.map((i) => i.y);
// 設定要給 X 軸用的 scale 跟 axis
const xScale = d3.scaleLinear()
.domain([0, d3.max(xData)+20])
.range([margin, rwdSvgWidth - margin]); // 寬度
const xAxis = d3.axisBottom(xScale)
.ticks(5)
// .tickValues(xData)
.tickFormat(function (d) {
//調整標籤樣式
return `${d} 元`;
})
// 呼叫繪製x軸、調整x軸位置
const xAxisGroup = svg.append("g")
.call(xAxis)
.attr("transform", `translate(0,${rwdSvgHeight - margin})`)
// 設定要給 Y 軸用的 scale 跟 axis
const yScale = d3.scaleLinear()
.domain([0, d3.max(yData)])
.range([rwdSvgHeight - margin, margin]); // 數值要顛倒，才會從低往高排
const yAxis = d3.axisLeft(yScale)
.ticks(5)
// 呼叫繪製y軸、調整y軸位置
const yAxisGroup = svg.append("g")
.call(yAxis)
.attr("transform", `translate(${margin},0)`)
// 開始建立長條圖
svg.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => xScale(d.x) - (bandWidth/2)) // 讓長條圖在刻度線中間
.attr("y", d => yScale(d.y))
.attr("width", bandWidth)
.attr("height", d => (rwdSvgHeight - margin) - yScale(d.y))
.attr("fill", "#69b3a2")
}
RWDChart()
// d3.select(window).on('resize', RWDChart);
function RWDTicks(){
// 刪除原本的svg.charts，重新渲染改變寬度的svg
d3.select('.RWDTicks svg').remove();
// RWD 的svg 寬高
const rwdSvgWidth = parseInt(d3.select('.RWDChart').style('width')),
rwdSvgHeight = rwdSvgWidth*0.8,
margin = 30,
bandWidth = 20
const svg = d3.select('.RWDTicks')
.append('svg')
.attr('width', rwdSvgWidth)
.attr('height', rwdSvgHeight);
//data
const data = [{x:100, y:20}, {x:18, y:30}, {x:200, y:250}]
// map 資料集
xData = data.map((i) => i.x);
yData = data.map((i) => i.y);
// 設定要給 X 軸用的 scale 跟 axis
const xScale = d3.scaleLinear()
.domain([0, d3.max(xData)])
.range([margin, rwdSvgWidth - margin]); // 寬度
// rwd X軸的刻度
let tickNumber = window.innerWidth > 450 ? null : 5;
xAxis = d3.axisBottom(xScale)
.ticks(tickNumber)
.tickFormat(function (d) {
//調整標籤樣式
return `${d} 元`;
})
// 呼叫繪製x軸、調整x軸位置
const xAxisGroup = svg.append("g")
.call(xAxis)
.attr("transform", `translate(0,${rwdSvgHeight - margin})`)
// 設定要給 Y 軸用的 scale 跟 axis
const yScale = d3.scaleLinear()
.domain([0, d3.max(yData)])
.range([rwdSvgHeight - margin, margin]); // 數值要顛倒，才會從低往高排
const yAxis = d3.axisLeft(yScale)
.ticks(5)
// 呼叫繪製y軸、調整y軸位置
const yAxisGroup = svg.append("g")
.call(yAxis)
.attr("transform", `translate(${margin},0)`)
}
RWDTicks()
d3.select(window).on('resize', function(){
console.log('畫面變化')
RWDChart()
RWDTicks()
});
</script>