[筆記] TypeScript + D3.js + Vue 3 – 幫長條圖加上 Tooltip

章節連結

在幫 D3.js 繪製出來的長條圖,除了加上水平、垂直軸 ( X-Y Axis ) 外,再來加上比較麻煩的 Tooltip ( 提示視窗 ),也就是你在滑動到如某條長條圖上,就顯示一些額外訊息的小方框。

d3 logo


核心關鍵

1. 要成功加上 Tooltip,要掌握 mouseover ( 滑到指定目標上的瞬間 )、mousemove ( 在目標上時 )、mouseout ( 移開指定目標 ) 的情結
2. 浮動的視窗,需要有一個 div 當做定位點,需在其的 CSS 設置:position:relative

原始碼


參考來源

1. SVG D3.js – 座標軸 ( Axis )
2. Building tooltips with d3.js


系列文章

  • [筆記] TypeScript + D3.js + Vue 3 – 初探 & 畫個長條圖
  • [筆記] TypeScript + D3.js + Vue 3 – 讓長條圖有 RWD 效果
  • [筆記] TypeScript + D3.js + Vue 3 – 幫長條圖加上基本的水平、垂直軸 ( x, y axis)
  • 按讚加入粉絲團

    延伸閱讀