如何在直方图/条形图的过渡后添加d3提示/鼠标悬停事件？

我创建了一个条形图/图：

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"; })

这样，mouseover事件就会在转换完成后发生。但是我得到了一个错误：

Uncaught TypeError: undefined is not a function

错误是针对以下行的：

.on('mouseover', tip.show)

我认为我的逻辑中有一个简单的缺陷。我似乎对这些事件或属性如何相互作用感到困惑。

再说一次:我想在转换完成后“激活”鼠标悬停提示，这样在转换完成后，如果用户将鼠标放在每个栏上，提示就会出现。创建mouseover事件并让它在用户mouseover上工作以显示我想要的数据没有问题，但我没有幸运地让这些条的过渡工作。