D3在转换后启用鼠标悬停
D3在转换后启用鼠标悬停
提问于 2014-10-14 01:57:50
如何在直方图/条形图的过渡后添加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上工作以显示我想要的数据没有问题，但我没有幸运地让这些条的过渡工作。
Stack Overflow用户
回答已采纳
发布于 2014-10-14 02:41:45
与添加/删除事件不同，一种方法是简单地设置/取消设置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>
如果你打开了控制台窗口，你会注意到鼠标悬停/移出不会记录任何东西，直到圆圈停止增长。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26346032
复制相关文章
相似问题
腾讯云开发者
