D3.js 資料視覺化工具(下)
📝 回顧第一章節：D3.js 資料視覺化工具(上)
📝 回顧第一章節：D3.js 資料視覺化工具(中)
前面章節學習 D3.js 基礎以及 SVG 製圖等。最後章節將手把手實作統計圖表！
📋 目錄
D3 長條圖
📍 [實作] 資料說明
大型連鎖健身房 ABC 集團，2015 年至 2020 年在臺灣的分店數目如下：(檔名為 ABC.csv )
year,value
2015,45
2016,47
2017,52
2018,70
2019,75
2020,78step 1
創建 SVG 並定義條形圖的比例，程式碼所示：
創建一個寬度 600px、高度500px SVG 元素，並設定 margin 變數為 200px。xScale 設定 X 軸的範圍以及 padding，由於 X 軸代表非連續數值的年度，故使用 scaleBand()，而 yScale 設定 Y軸的範圍。range() 表示期望輸出範圍。transform 部分設定圖表的邊距。
step 2
讀取 ABC.csv 資料，程式碼所示：
將離散的年份值應設到 X 軸，設定 Y 軸最大輸入值。使用 transform 屬性將 X 軸移向 SVG 底部，再用 .call(d3.axisBottom()) 將元素加到 X 軸。目前 X 軸處理完成！tickFormat() 方法格式化刻度，使用 ticks(10) 指定了 Y 軸具有刻度數(可以設定較少的數字看看變化)。
查看瀏覽器，X 軸與 Y 軸已經畫好了！
🔖 補充說明
1.CORS問題：使用網頁瀏覽器瀏覽網頁時，瀏覽器為了保障資料傳輸的安全性，具備一個重要的瀏覽器端語言的安全協定，這個協定僅允許script在同個網域之間互相傳送資料，但是禁止不同網域之間互相取用方法與屬性。為了方便在網頁端進行開發，建議使用Google Chrome進行瀏覽，並安裝跨域套件:CORS FreeIPTV。
2.讀取json檔案：設定好json檔案，使用d3.json("xxx.json")即可讀取。step 3
由於此為垂直條形圖，圖表寬度是固定的，寬度將根據數據集大小而變化。故將通過將圖表寬度除以數據集大小來計算寬度。
加上 bar，先設定為矩形，再加上樣式 fill:teal bar 的顏色。 X 軸與 Y 軸對應到各自的值。X 軸寬度會由前面設定的 scaleBand() 去計算，所以這邊寬度設定為 bandwidth()。高度由於是從左上(0,0)開始計算，因此每個 bar 開始的點為 height-yScale(d.value)。而 tick line & domain class 的部分後面會用到。
查看瀏覽器，bar 已經畫上去了！
🔖 補充說明
1.移除X軸&Y軸的軸線：在d3.axisBottom()&d3.axisLeft()下方加上.select('.domain').remove()即可移除。
2.移除tick標示：在d3.axisBottom()&d3.axisLeft()下方加上.selectAll('.tick line').remove()即可移除。step 4
最後加上圖表標題以及 X 軸 Y 軸標示，以及 .tickSize(-width)設定圖表後淺灰色對應橫線。完整的 script 區塊如下：
查看瀏覽器，bar 已經完成了 🙆
D3 圓餅圖
實作繪製圓餅圖前，先認識三個 d3 methods：
1. d3.scaleOrdinal()
d3.scaleOrdinal() 用來構造一個序數比例，其中輸入資料包含字母並對映到離散數字輸出範圍。
2. d3.pie()
d3.pie() 函數接收一個數據集以用於 SVG 中生成餅圖，並計算圓餅圖的起始角度和結束角度。
3. d3.arc()
d3.arc() 生成一個弧，即為圓餅圖的路徑。弧需要一個內半徑和外半徑，其中內半徑若設定為 0，繪製圓餅圖，設定其他數字則是圓環圖。
📍 [實作] 資料說明
ABC GYM 其中一位任職剛滿2年的高階經理，24個月奔走於4個縣市，想繪製一張圓餅圖，查看自己在不同縣待的月份數。
運用前面所學繪製簡易圓餅圖，程式碼如下：
其中將半徑計算為 Math.min(width, height) / 2 是為了確保生成的餅圖不會超出 SVG 畫布的邊界。
初步的圓餅圖已完成，最後加上標題及月份數字：
大功告成 👏 看起來還不錯！
D3 系列小結
先建立 D3.js 基礎，再學習 SVG 製圖，最後實作長條圖及圓餅圖。一步步跟著實作練習，相信對 D3 製圖有初步概念。此系列內容特別感謝 💜 TutorialsTeacher 教學網站，延伸學習可以參考 D3.js 官方文件。
最後，附上兩張圖表練習的 GitHub 檔案連結 🔗 ，專案資料夾名稱：d3-basic-barChart-and-pieChart。有任何指點或建議都可以在下方留言～🙏
💐 Thanks for reading.
