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");                            
        })
        }

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

1 个答案: