我正在使用d3散点图,当我将鼠标悬停在该点上时,我希望我的工具提示出现在一个点旁边.我知道这很简单,但我不知道我哪里出错了!这是相关的代码.它会抛出此错误:
Uncaught TypeError: Cannot read property 'pageX' of null
如果有人能指出我正确的方向,我将非常感激,因为我是d3的新手!提前致谢.
// add the tooltip area to the webpage
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
function mouseHandler (d) {
d3.json("connection3.php?paperID="+d.ID, function(error,data) {
var authorList = ""
data.forEach(function(d) {
authorList = authorList + d.AUTHOR;
console.log(authorList);
})
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(authorList)
.style("left",(d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
}
CSS:
.tooltip {
position: absolute;
width: 200px;
height: 28px;
pointer-events: none;
background: lightsteelblue;
}