章節連結
在幫 D3.js 繪製出來的長條圖,除了加上水平、垂直軸 ( X-Y Axis ) 外,再來加上比較麻煩的 Tooltip ( 提示視窗 ),也就是你在滑動到如某條長條圖上,就顯示一些額外訊息的小方框。
核心關鍵
1. 要成功加上 Tooltip,要掌握 mouseover ( 滑到指定目標上的瞬間 )、mousemove ( 在目標上時 )、mouseout ( 移開指定目標 ) 的情結
2. 浮動的視窗,需要有一個 div 當做定位點,需在其的 CSS 設置:position:relative
原始碼
參考來源
1. SVG D3.js – 座標軸 ( Axis )
2. Building tooltips with d3.js
系列文章
延伸閱讀
- [筆記] Ultimate AWS Certified Developer Associate (36)
- [指南] 安裝專案 npm 套件出現 exited with error code: 128
- [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (52)
- [筆記] Ultimate AWS Certified Developer Associate (35)
- [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (45)