iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
1
AI & Data

D3.js資料視覺化的浪漫突進系列 第 25

Day25 D3js d3-tip 好用的小工具

D3js d3-tip 好用的小工具

用途

可以觀看資料列詳細的資料,方便閱讀資料量較大的圖表。自己實現也可以,但有三方套件可以方便使用,就拿來用吧!

d3-tip

Github

其實這一個三方元件已經許久沒有更新,可能代表沒甚麼Bug非常穩定,但不幸的是在d3 v6版本上是無法運行的,所以如果要使用,只能使用d3 v5,也或者是我不知道v6啟動的方式。

使用

使用昨天的甘特圖例子,我們讓我們hover至甘特圖上時,可以顯示當下的Task名稱跟開始結束時間。

設定tip

let tip = d3.tip().attr('class', 'd3-tip').html(d => `
  <div class="tip">
    <span>Task: ${d.name}</span>
    <span>Start: ${formatTime(d.start)}</span>
    <span>End: ${formatTime(d.end)}</span>
  </div>
`);

這邊就可以描述我們的tooltip的樣子,可以使用html標籤,套件會幫我們渲染出來在最上層。

決定渲染圖層

const paintTip = () => {
  tipLayer.call(tip);
}

設定顯示隱藏事件

const paintTasks = () => {
  tasksLayer.selectAll('rect')
            .data(series)
            .enter()
            .append('rect')
            .attr('x', serie => xScale(serie.start))
            .attr('y', serie => yScale(serie.name) + yScale.bandwidth() * 0.25)
            .attr('width', serie => xScale(serie.end) - xScale(serie.start))
            .attr('height', yScale.bandwidth() * 0.5)
            .attr('fill', serie => serie.fill)
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide)
}

hovertask上時,就會顯示tooltip反之離開時則隱藏tooltip

設定樣式

CSS

.tip {
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
  background: white;
  padding: 15px 15px;
}

結論

非常簡單使用,如果不是使用D3 v6都可以輕鬆擁有Tooltip

Codepen範例

參考

d3-tip


上一篇
Day24 D3js Gantt Chart 來張甘特圖吧!
下一篇
Day26 D3js 浪漫復刻ExpertOption的養眼圖表
系列文
D3.js資料視覺化的浪漫突進30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言