了解 d3 基本的 methods 及 scale 作用。試著修改 domain, range,以及 style 來影響結果,新增 data
原本將最大值的 bar 改成別的顏色,但如果資料是已排序過的,意義就不大。所以僅調整了最大值的 font size
了解 d3 基本的 methods 及 scale 作用。試著修改 domain, range,以及 style 來影響結果,新增 data
原本將最大值的 bar 改成別的顏色,但如果資料是已排序過的,意義就不大。所以僅調整了最大值的 font size
使用 svg 在畫圖形上的便利性提高了不少,另外了解到幾乎所有屬性的設定都是可以傳值或傳 callback,callback 都有 d, i 可以用
原本 data 是寫死在 index.html,改成讀取外部 data.tsv 檔。data.tsv 多了欄位 name,所以試著把 name 也呈現在圖表上
調整數字位置於 bar 上方並且改顏色,避免 bar 的高度不足擋到數字。調整 bar 寬度避免擋到隔壁的數字
試著調整 X, Y 軸的 line, path style
遇到的問題:原本想把每個 bar 都加上數字,但失敗了。不知道如何把 <rect>
包成 <g><rect/><text/></g>
,或者有更好的做法?
試一下調整 X 軸的文字,上下錯開,避免相鄰的文字看不清楚
在每個 bar 上方加上數值,並試一下 rotate()
了解 extent, nice 用法,還有 tickSize
調整 circle 的 r, stroke 並且讓 Y 軸 tick 線延伸
了解 enter(), exit() 及 data binding
修改 data 產生的方式,方便觀察。exit() 不移除,而是變紅色
試一下 transition,每次 update/remove 套用 transition。嘗試把 text 的 attr y 累加
了解 data(), datum() 的差別,學習 area 用法
將每個年份用不同的 area 分開
遇到的問題:為什麼每個 area 中間會有隙縫?而且大小還不同?因為日期沒有連續嗎?