D3.js 範例學習-健身追蹤器
📋 目錄
範例介紹
🏆 2021年8月8日東京奧運剛結束，選手回歸訓練的日常。
一個好用的健身追蹤器，可以協助記錄運動的數據。
Fitness Tracker 範例由 Shaun Pelling 撰寫 ✒️
打造一個健身追蹤器，包含 🚲 騎車、 🏃 跑步、 🏊 游泳、 👟 健走四個項目。收集使用者輸入的運動量，依實際時間繪製四張折線圖。
請先至 GitHub 檔案連結 🔗 ，專案資料夾名稱：d3-ui-with-d3-firebase(branch: lesson-83) 下載完整程式碼。
若尚未具備基礎 D3.js 概念，建議先閱讀這幾篇：
🚪 D3.js 資料視覺化工具(上)
🚪 D3.js 資料視覺化工具(中)
🚪 D3.js 資料視覺化工具(下)
輔助檔案說明 (index.html, index.js)
下載好整個專案程式碼，可以看到檔案結構如下：
其中 graph.js 是 D3.js 相關的內容，會在後續做進一步探究，而 styles.css 放置樣式相關設定，將不加以深究。
index.html
檔案引用區塊可以看到 Materialize.css 的引用，輔助畫面美觀用途。<body></body>的上方是標題，主要劃分左右區塊，左邊為運動項目，右邊繪製折線圖，下方題讓使用者輸入運動量。檔案中引用 Firebase，會在下個小結介紹。
index.js
先將設定好要操縱的 DOM 元素，預設運動為腳踏車 🚲
按鈕部分先將所有的 btns 加上 click 事件監聽器。觸發時，會置換成選到的運動，並將所有的 btns 樣式取消，重新設定給選定的運動，id 及 下方文字置換，最後呼叫 update function。
表單傳送，加上 submit 事件監聽器，由於運動量輸入框收集數字，所以需要使用 parseInt 將字串轉成數字。再傳送給 firebase，共傳送距離、項目、時間日期(會抓取電腦設定的時間)。若操作成功將會清空 error 訊息區塊，以及 input 欄位(方便下一次輸入)。如果使用者在一開始，沒有輸入值就按下送出，則會出現 Please enter a valid distance 提示。
結合 index.html 與 index.js，可以看到此用 data-activity 屬性搭配 e.target.dataset.activity 撈取，藉此取得對應的項目！
Firebase介紹
Firebase 是一套雲端後端服務平台，提供多種開發情境所需功能，具備即時資料與低維護成本的特色。詳細可以參考官方文檔 🔍
Google 的 Firebase 平台可以直接用 Google 帳號登入。建立專案後，此專案將使用 Firestore Database。SDK 設定和配置會有一段可複製的程式碼，將其複製貼到 index.html 檔案中，並加上下列程式碼：
D3.js 檔案說明 (graph.js)
前置作業都完成後，進到重頭戲 D3.js 部分 🎯
檔案較大且處處是精髓，故將其分成六個部分。
Part 1 設定好畫布的邊界及圖表的長度寬度
Part 2 準備 X,Y 軸 以及軸線標記，其中 X 軸使用 d3.scaleTime 是取時間用。xAxisGroup 的 transform 是把 X 軸座標往下方推。
Part 3 繪製折線圖的線，以及 dottedLines (hover時出現)。stroke-dasharray 可以繪製出虛線。
Part 4 Update Function
這個部分很長，查看程式碼之前，可以先理解 update function 中包含的內容。會先更新 scales(domains)，再把更新的資料結合到 DOM 元素，若有刪除或是異動資料做更新，若有新加入的資料將其加到 DOM 上方。
先取得選定的項目(共有四項運動)，依據時間順序將資料排序。設定 X軸 Y軸的 domain，d3.extent 可得最大最小值。接著更新 path 資料(包含繪製折線)。創建要標記的圓點，移除不需要的點再繪製要標記的點。graph 部分新增了 mouseover mouseleave 的動作，搭配 opacity 設定，讓游標 hover 時會有對應的效果。xAxis 與 yAxis 軸的標記，其中 X 軸旋轉 -40 度。
Part 6 Collect Data (Firestore)
一開始在 index.html 加入 firebase 的設定，由 db 取用。有關 firebase 的寫法相對固定，使用 onSnapshot() 監聽檔案。若資料有改動，即會做出相對應檢查其所對應的操作。
有關完整的專案探討告一段落！筆者實際操作後，新增一個功能：點按圖表上的資料點，即可刪除該筆資料。
🔖 補充：加上點選刪除的功能
在控制 mouse 活動的區塊，加上 on.('click',handleClick)並在 graph.js 最下方加上：
(極少量客製化)開啟瀏覽器，畫面如下：
操作上沒有問題 ✅，畫面看起來也很不錯！
小結
具備 D3.js 基礎後，藉由網路資源找尋不錯的範例，抽絲剝繭做學習，過程中更熟悉 D3.js 應用。再次附上 GitHub 檔案連結 🔗 ，專案資料夾名稱：d3-ui-with-d3-firebase(branch: lesson-83)。有任何指點或建議都可以在下方留言～🙏
🕘 Thanks for reading!
