javascript - D3 在转换后启用鼠标悬停

Question

如何在直方图/条形图上转换后添加 d3-tip/mouseover 事件？

我创建一个条形图/图:

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>

如果您打开控制台窗口，您会注意到鼠标悬停/移出不会记录任何内容，直到圆圈停止增长。