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

Posted onAuthorANDY LIEN

章節連結

在幫 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)
    • 按讚加入粉絲團

    延伸閱讀