運用 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!