前言

在講完所有的圖表設定後，今天要來介紹如何讓我們設計好的圖表可以跟使用者進行互動，為了要讓圖表能進行互動我們就必須要將圖表設定一些 event ，這樣使用者才能夠觸發這些 event 來達到互動的效果，所以今天的文章就是要來教大家如何幫圖表添加 event ，並同時介紹 tooltip 來呈現觸發 event 後的互動。

chart event

還記得在 Day17 的文章最後總結的時候提到：可以把 D3 用 jQuery 的方式來思考，其實 D3 的圖表 event 就跟 jQuery 一樣，都是 .on() 來進行事件的綁定，通常圖表的互動都是以 click 為主，但今天的文章為了要利用 tooltip 來進行互動所以選用的 event 會是 mouseover 以及 mouseout ，寫法如下：

svg
  .on('mouseover', tooltip.show)
  .on('mouseout', tooltip.hide)

tooltip

在開始介紹怎麼繪製 tooltip 之前先來介紹一下什麼是 tooltip 吧！ tooltip 存在的意義就是為了讓圖表可以顯示更多的資訊，透過上面所教的圖表 event 讓使用者除了可以跟圖表進行互動外，同時也可以藉由這個互動得到更多的圖表資訊。

俗話說的好：不要重複造輪子，雖然 D3 可以自行設定 tooltip ，但筆者今天要來推薦一個好用的 D3 tooltip 套件來進行 tooltip 的繪製 其實是因為懶得自己從頭設定 ，這個套件叫： d3-tip 。

d3-tip 的 API 不多只有 8 個，所以很快就可以上手了，透過這幾個 API 的設定，整個 tooltip 就可以完美的繪製出來了，非常的簡單易上手，不過筆者不會介紹全部的 API ，因為有些設定其實可以透過 CSS 來調整，所以接下來就來介紹幾個比較常用的 API 吧！

• d3.tip

  初始化一個 tooltip function ，之後就可以利用這個 tooltip function 去串接其他的 d3-tip API 。

• tip.attr

  設定 tooltip attribute ，寫法就跟 d3.attr() 一樣。

• tip.offset

  控制 tooltip 與圖表的位置，要用 position: relative 方式來思考，參數會是一個陣列， array[0] 為 top 、 array[1] 為 left 。

• tip.show

  顯示 tooltip 。

• tip.hide

  隱藏 tooltip 。

• tip.html

  設定 tooltip 內容，撰寫 HTML string 。

組合上面所教 API

最後就來組合上面所教的 API 吧！已筆者的習慣來說會把整個 tooltip 的設定用一個 function 包起來，最後再回傳整個 tooltip 的 callback function ，這時候就可以運用昨天文章所教的 d3.call() 把這個 callback function 傳進去圖表內啦！整體寫法會長得像這樣：

// 將 d3-tip import 進來
import d3Tip from 'd3-tip'

// 設定 tooltip
function setTooltip() {
  // 初始化 tooltip function
  const tooltip = d3Tip()
    .attr('class', 'd3-tip')
    .offset([-14, 0])
  
  // 設定 tooltip 內容
  tooltip.html(
    d => `
      <div class="name">${d.name}</div>
      <div class="value">${d.value}</div>
    `
  )
  
  // 回傳 tooltip function
  return tooltip
}

// 傳入設定好的 svg 中
const tooltip = setTooltip()
svg.call(tooltip)

最後互動就會長得像這樣：

總結

今天介紹了圖表的 event 操作以及 tooltip 的產生，學會這些技巧就可以順利的讓圖表有互動式的設計了。

如果有什麼問題歡迎在下面留言給我，沒問題的話明天要來講講