D3 + p5.js 筆記 - 前言

這陣子看了點 D3,並找了官方 wiki 的範例來試試,不過不是用 SVG,而是用 canvas 來畫。

之前要寫的網站要生成簡易的圖表,但因為沒學過 D3 的經驗(當時也來不及),所以找了現成的 Chart.js 來用,除了這套之外,之後也在 feedly 看了不少圖表生成的套件介紹,蠻多都是用 canvas 的。不過這倒也不是什麼選擇 canvas 的原因。

單純犯賤罷了…

然而,D3 對 canvas 的支援不好,不過這也不是很意外。問題在於要怎麼用 D3 把處理後的資料給 canvas 畫,根據這裡的介紹,第三種方式算是我在網路上最常看見的,基本上就是處理資料並創建虛假的元素,假裝自己在操作 SVG,然後再把這些假元素吐出來再用 canvas 的方式畫出來,怎麼看都覺得…蠻蠢的。所以我比較偏好第二種方式,讓 D3 負責處理資料、生成刻度等等,再用 p5.js 直接畫上去。

總之,之後會加減從 D3 官方的範例裡面先挑簡單的例子來練習,也會原始碼放到 GitHub 上。