如何使文本悬停在数据点上

Question

当我将鼠标悬停在数据点上时，它会将该数据点的信息锁定在屏幕的左侧。我该如何让它位于用户鼠标所在的位置？这是我的

var tooltip = d3.select("body")
.append("div")
.attr("id", "tooltip")
.attr("style", "position: absolute; opacity: 0;")
.style("border", "solid")
.style("border-width", "1px")
.style("border-radius", "5px")
.style("padding", "10px");````
...
.on("mouseover", function(d){
d3.select("#tooltip")
.transition()
.duration(200)
.style("opacity", .9)
.text("User: " + d.user + " " +
"Top Artist: " + " " + d.artist + " " + 
"Top Song: " + d.track)
d3.select(this)
.transition()
.duration(100)
.attr("r", 23)
.attr("fill", "orange");
})
.on("mouseout", function(d) {
d3.select("#tooltip")
.style("opacity", 0)
d3.select(this)
.transition()
.duration(100)
.attr("r", 15)
.attr("fill", "black");
}); 

Answer 1

您可以使用D3中内置的d3.event.pageX和d3.event.pageY。当你添加工具提示时，试试这个：

d3.select("#tooltip")
.transition()
.duration(200)
.style("opacity", .9)
.text("User: " + d.user + " " +
"Top Artist: " + " " + d.artist + " " + 
"Top Song: " + d.track)
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY - 28 + "px");

您可能需要根据工具提示的高度调整top样式。