d3.js工具提示定位不起作用

Question

我正在使用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;

}

Answer 1

线条:

  .style("left",(d3.event.pageX) + "px")
  .style("top", (d3.event.pageY - 28) + "px");     

如果它们直接位于mousehandler函数内,它们会很好用.但是,它们在回调函数中d3.json,因此它可以解释为什么d3.event不再定义.

因此, 在调用d3.json之前,请尝试保存pageX和pageY局部变量的值.

  function mouseHandler (d) {
        var pageX=d3.event.pageX;
        var pageY=d3.event.pageY;


        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",(pageX) + "px")
                .style("top", (pageY - 28) + "px");                            
        })
        }