时间戳

首页 > 解决方案 > d3 为什么在 mousehover 字段上未定义并且 d3.event 也未定义？

d3.js - d3 为什么在 mousehover 字段上未定义并且 d3.event 也未定义？

问题描述

遇到了这个问题。你能看看吗？ https://codepen.io/DeanWinchester88/pen/BaZYewv

          tooltip.html(d.area + "%")
         // .style("left", (d3.event.pageX + 3) + "px")
         // .style("top", (d3.event.pageY +  5) + "px")

标签： d3.js

解决方案

有几个问题。首先，您在事件侦听器中交换了参数的顺序。第一个参数是事件，第二个参数是数据。其次，您可以使用and而不是d3.event.pageXand 。d3.event.pageYevent.pageXevent.pageY

这是一个例子：

  .on("mouseover", (event, d) => {
    tooltip.style("opacity", .7)
        .style("left", (event.pageX + 3) + "px")
        .style("top", (event.pageY +  5) + "px")
        .html(d.area + "%");
  })
  .on("mouseout", (event, d) => {
    tooltip.style("opacity", 0)
  })

推荐阅读