基本上是這系列最後一篇，除非之後接觸到跟SVG相關的有趣應用! (≧▽≦)
我在大學畢業的最後一學期，選修網頁資料視覺化的課程，課程主要使用D3.js這個JavaScript擴充函式庫做資料視覺化的工作。那D3.js是什麼? 跟SVG有什麼關係呢?
D3.js
D3指的是Data-Driven Document，以資料驅動編輯網頁的DOM，更白話的說法就是可以根據資料的筆數，動態地生成相同數量的網頁元素。
再舉個實際的例子:
建立data變數，並在裡面放入三個人分別喜歡的水果資料。然後利用D3.js內建的函數，將john喜歡的水果資料匯入，D3.js就能自動根據資料筆數在body建立三個div元素，而且還能在網頁上顯示出資料的文字內容。
| <script src="//unpkg.com/d3"></script> <script> var data = { john: ['Apple', 'Orange', 'Lemon'], marry: ['Apple', 'Orange'], ryan: ['Apple', 'Cherry', 'Peach', 'Orange'] }; d3.select("body").selectAll('div') .data(data['john']) .enter() .append('div').text(function(d){return d;}) </script> |
實際使用過D3.js就會發現，它的語法實在是和jQuery相當類似，不過相比於jQuery的廣泛應用，D3.js則聚焦在資料視覺化上。(雖然部分人認為jQuery正在走向沒落，但目前還是有接近95%的網站有使用jQuery喔!)
(圖片出自: W3Techs)
所以到底D3.js跟SVG有什麼關係呢? 在網頁上建立圖形畫布主要有兩大選擇，其中一個是Canvas，另一個則是SVG。想當然爾D3.js產生資料視覺化的圖形都是在SVG畫布之下囉!
我們可以在HTML檔案建立SVG畫布，然後使用D3.js的內建函數，去新增各種SVG元素並做出多樣的圖表，同時我們還能根據資料的變化，添加自訂的互動性動畫效果等等。
下圖就是透過D3.js配合SVG在網頁呈現的長條圖，原始碼因為太長就不放了。
最後來講講個人使用D3.js到現在的心得，以上面的長條圖為例，要能成功顯示x、y坐標軸，就必須仰賴不少內建函式來定義刻度的值域、寬度，而那一個個的長條(bar)也都必須自己透過函式定義位置和添加到畫布上。
總而言之，使用D3.js產生圖表必須依靠眾多的內建函式，所以需要充分理解每個函式在做什麼，我基本上都是開著官方的說明文件邊看邊寫。但也因為圖表的每個細節都可以調整，所以D3.js是追求高度客製化圖表的一大利器。
如果不是追求高度客製化圖表的話，其實還有不少更簡單的JavaScript視覺化函式庫可以使用，像是C3.js或是Chart.js等等，相信整個學習曲線會相對D3.js平滑不少。
