運用 D3.js 手把手練習 SVG 製圖
📋 目錄
實作練習介紹
目標：製作一個設定好秒數切換的紅綠燈，並提供切換開關 🚥
此練習需具備基礎 D3.js 概念，若不清楚建議先看這篇：
🚪 D3.js 資料視覺化工具(上)
另外，也將運用 SVG 工具製圖，若不清楚建議先看這篇：
🚪 D3.js 資料視覺化工具(中)
使用 D3.js 製作紅綠燈本體(包含顏色樣式)，切換開關部分則會使用原生 JavaScript 寫法搭配 CSS 完成。
請先準備好一個 index.html 檔案，以及在資料夾同一層加入一個空的 index.js 檔案。 index.html 檔案完整程式碼如下：
準備好了，就開始實作吧 🚀
[實作] 製作三個圓燈
先把號誌燈的 light function 寫出來，預定將設為紅色(但目前並沒有真正設定到)。
使用 d3.range 創造一個 array，並用 map 加入設定的 type。
接下來把三個圓加到畫布上，程式碼如下：
.selectAll('circle') 一開始是一個空的選擇，設定要選擇的元素，當加入 data 之後，使用 enter (創建包含缺失元素佔位符的工具) append 剛剛 select 的圓形到畫布上。先看下方的 fill 即是把真正的紅色設定上去，r 設定圓半徑。cx 圓心 X 的位置 function(d,i) d 代表資料，i 代表 index，至於 +200 是將三個紅圓往右推 200 px。
目前三個紅色圓添加完畢 🔴 🔴 🔴
再進到下個步驟前，先把 SVG 設定包到 render function，好處是後續觸發使用，可以輕省對DOM的操作。
[實作] 製作殼體 & 切換紅綠燈
先設定 colorSale，使用 d3.scaleOrdianl() 讓顏色對應到代碼。下方設定一秒後，改變顏色，render 部分加上 update 部分。
看到 .attr('fill', d=> colorScale(d.type)) 重複，所以使用merge()
merge 詳細用法可以參考這篇 🔍
接著建造紅綠燈的殼體，並調整亮燈的設定，亮綠燈亮五秒，接著亮黃燈三秒 ，之後都亮紅燈。
基本款的紅綠燈完成了 ✅
[實作] 添加燈罩 & 開關切換器
基本的紅綠燈在上個步驟已經完成，不過真實的紅綠燈應該有燈罩，而且會不停切換，而非只有一次轉換，所以設計了切換開關方便使用者操作！
首先在原本的 index.html 檔案加上切換開關的 style 以及切換開關本體。程式碼如下：
設定好 index.html 檔案後，加上燈罩以及設定秒數程式碼如下：
其中使用了 setTimeout() setInterval() clearTimeout() clearInterval() 設定非同步時間。完成的成品如下：
最後的成品很棒 🍻 紅綠燈完成了🚦
小結
具備 D3.js 基礎後，運用 SVG 繪製不同圖形(圓形的燈、具弧角的長方形、圓弧狀的燈罩)，搭配不同的工具完成此紅綠燈實作。附上此練習的 GitHub 檔案連結 🔗 ，專案資料夾名稱：d3-practice-TrafficSignal。有任何指點或建議都可以在下方留言～🙏
🚗 Time to hit the road!
