了解 extent, nice 用法,還有 tickSize
調整 circle 的 r, stroke 並且讓 Y 軸 tick 線延伸
了解 extent, nice 用法,還有 tickSize
調整 circle 的 r, stroke 並且讓 Y 軸 tick 線延伸
在每個 bar 上方加上數值,並試一下 rotate()
試一下調整 X 軸的文字,上下錯開,避免相鄰的文字看不清楚
試著調整 X, Y 軸的 line, path style
遇到的問題:原本想把每個 bar 都加上數字,但失敗了。不知道如何把 <rect>
包成 <g><rect/><text/></g>
,或者有更好的做法?
調整數字位置於 bar 上方並且改顏色,避免 bar 的高度不足擋到數字。調整 bar 寬度避免擋到隔壁的數字
使用 svg 在畫圖形上的便利性提高了不少,另外了解到幾乎所有屬性的設定都是可以傳值或傳 callback,callback 都有 d, i 可以用
原本 data 是寫死在 index.html,改成讀取外部 data.tsv 檔。data.tsv 多了欄位 name,所以試著把 name 也呈現在圖表上
了解 d3 基本的 methods 及 scale 作用。試著修改 domain, range,以及 style 來影響結果,新增 data
原本將最大值的 bar 改成別的顏色,但如果資料是已排序過的,意義就不大。所以僅調整了最大值的 font size