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>
這邊就可以描述我們的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)
當hover到task上時，就會顯示tooltip反之離開時則隱藏tooltip。
.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