D3 + p5.js 筆記 - Bar Chart

  1. 1. 程式碼說明
  2. 2. 題外話

banner

程式碼說明

這次範例來源有 hover 的顏色變化,為了省略寫作標判定的部份,我另外載入了 p5.play.js

大部分的區塊應該不用特別講了,大概提一下 p5.play.js 的一點坑就好。

createSprite 的座標指的是每個 bar 的中心點,向外畫出矩形,所以不會像一般畫長方形一樣,座標在左上角,若不額外調整位置會跑掉。然而,這種畫法是不是最終定案不清楚,畢竟 p5.play.js 還不是正式版。

題外話

canvas 畫圖其中一個麻煩的地方大概就是游標判定了,p5.play.js 的游標判定功能不算強大,只有支援圓跟矩形,圖片則是有另外的判定方式(游標底下是不是透明背景之類),跟其他遊戲引擎類的差不多。

像百度的 ECharts 的範例互動多半也是用比較折衷的做法。

不過之前看到了 Paper.js 這個東西,在游標測試的範例裡看起來運作得很完美,改天來試試看。