我有一个移动的<div>对象。我想显示/更新这个tooltip info,比如说每个2s。它工作得很好,但即使对象移动了,位置也不会改变,tooltip保持初始位置并保持不变(对不起,我没有提供一个有效的例子)。
如何更新其位置以跟随<div> (而不是鼠标)?
发布于 2016-06-29 08:07:30
event.pageX和event.pageY
下面的描述用于event.pageX描述:鼠标相对于文档左边缘的位置。
下面是我在一个应用程序中使用的代码。
您可以在鼠标悬停事件上显示下面的div。
date.selectAll("rect")
.data(function(d) {
return d.mattel_data;
})
.enter().append("rect")
.attr("width", x.rangeBand())
.attr("y", function(d) {
return y(d.y1);
})
.attr("height", function(d) {
return y(d.y0) - y(d.y1);
})
.style("fill", function(d) {
return color(d.name);
})
.on("mouseover", function(d) {
div.transition()
.duration(100)
.style("opacity", .9);
var hoverVal = (d.y1 - d.y0);
var formatter = new Intl.NumberFormat('en-US',{
style : 'currency',
currency : 'USD',
minimumFractionDigits : 2,
});
var pop = formatter.format(hoverVal);
// console.log(pop);
div.html("Value:" + pop + "<br/>" + d.name)
.style("left", (d3.event.pageX - 140) + "px")
.style("top", (d3.event.pageY - 80) + "px")
.style('position', 'absolute')
.style('font-size', '15px')
.style('background', function() {
return color(d.name);
})
.style('color', function() {
return getContrastYIQ(color(d.name));
})
})
.on("mouseout", function(d) {
div.transition()
.duration(200)
.style("opacity", 0);
});看看这对你有没有帮助。此外,如果你在这里发布你的代码,这将有助于更清楚地理解你的问题
https://stackoverflow.com/questions/38088139
复制相似问题