D3在過渡后啟用鼠標懸停

Question

在直方圖/條形圖上進行過渡后，如何添加d3-tip /鼠標懸停事件？

我創建一個條形圖/繪圖：

canvas.call(tip);

var sampleBars = canvas.selectAll(".sampleBar")
  .data(data)
.enter().insert("rect", ".axis")
    .attr("class", "sampleBar")
    .attr("x", function(d) { return x(d.x) + 1; })
    .attr("y", function(d) { return y(d.y); })
    .attr("width", x(data[0].dx + data[0].x) - x(data[0].x) - 1)
    .attr("height", 0)
    .transition()
    .duration(2500)
    .delay(500)
    .attr("height", function(d) { return height - y(d.y); });

我要添加：

sampleBars
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide);

這是提示：

    var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) { 
    return "<span style='color:white'>" + d3.round((d.y * 100)) 
    + "%" + "</span>" + " infected"; })

這樣，鼠標懸停事件將在轉換完成后發生。 但是我得到了錯誤：

Uncaught TypeError: undefined is not a function

錯誤是針對該行：

.on('mouseover', tip.show)

我認為我的邏輯存在一個簡單的缺陷。 對於這些事件或屬性如何相互影響，我似乎感到困惑。

再說一次：我想在過渡完成后“激活”鼠標懸停提示，以便在過渡完成后，如果用戶將鼠標放在每個欄上，該提示就會出現。 創建鼠標懸停事件並使其在用戶鼠標懸停上工作以顯示所需的數據時，我沒有問題，但是通過這些欄的過渡使此工作正常運行，我一點都不走運。

Answer 1

除了添加/刪除事件外，一種方法是簡單地設置/取消設置pointer-events屬性，以便在您希望抑制事件時不觸發事件。

 var myselection = d3.select('body') .append('svg').attr({height: 200, width: 200}) .append('circle') .attr( {cx: 100, cy: 100, r: 0}) .attr('pointer-events', 'none') .on('mouseover', function() { console.log('mouseover'); }) .on('mouseout', function() { console.log('mouseout'); }) myselection .transition().duration(4000).attr('r', 100) .transition().attr('pointer-events', 'auto') 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

如果打開控制台窗口，您會注意到鼠標移入/移出不會記錄任何東西，直到圓圈停止增長。