时间戳

首页 > 解决方案 > 工具提示在我的热图中给出了错误的值

javascript - 工具提示在我的热图中给出了错误的值

问题描述

我试图在我的热图上创建一个工具栏。热图和工具提示正在工作，但工具提示给了我错误的值。Tooltip 的输出总是给我这个值：

“确切的值是：未定义”

同样在调试控制台中，它给了我一条消息：

“rbug/1173575，非 JS 模块文件已弃用。”

这里有什么问题？

    var tooltip = d3.select("#container")
      .append("div")
      .style("position", "absolute")
      .style("visibility", "hidden")
      .style("background", "#ffffff")

svg.selectAll()
      .data(mapData.data, function(d) {return d.group +':'+ d.variable;})
      .enter()
      .append("rect")
        .attr("x", function(d) { return x(d.variable) })
        .attr("y", function(d) { return y(d.group) })
        .attr("width", x.bandwidth() )
        .attr("height", y.bandwidth() )
        .style("fill", function(d) { return colour(d.value)})
      .on("mouseover", function(d){
        return tooltip.style("visibility", "visible");
      })
      .on("mousemove", function(d){
        tooltip.html("The exact value is: " + d.value)
        return tooltip.style("top", (d3.pointer(this)[1]) + "px").style("left",(d3.pointer(this)[0]+30) + "px");
      })
      .on("mouseleave", function(d){
        return tooltip.style("visibility", "hidden");
      })  

  <script src="https://d3js.org/d3.v6.js"></script>
  <div id="container"> </id>

标签： javascriptd3.js

解决方案

代替：

svg.selectAll()
      .data(mapData.data, function(d) {return d.group +':'+ d.variable;})
      .enter()
      .append("rect")
        .attr("x", function(d) { return x(d.variable) })
        .attr("y", function(d) { return y(d.group) })
        .attr("width", x.bandwidth() )
        .attr("height", y.bandwidth() )
        .style("fill", function(d) { return colour(d.value)})
      .on("mouseover", function(d){
        return tooltip.style("visibility", "visible");
      })
      .on("mousemove", function(d){
        tooltip.html("The exact value is: " + d.value)
        return tooltip.style("top", (d3.pointer(this)[1]) + "px").style("left",(d3.pointer(this)[0]+30) + "px");
      })
      .on("mouseleave", function(d){
        return tooltip.style("visibility", "hidden");
      })

和：

 svg.selectAll("rect")     
      .on("mouseenter", () => tooltip.style("visibility", "visible"))
      .on("mousemove", (e, d) => {
        tooltip.html("The exact value is: " + d.value);
        tooltip
        .style("top", `${e.layerY + 24}px`)
        .style("left", `${e.layerX + 24}px`);
      })
      .on("mouseleave", () => tooltip.style("visibility", "hidden"))

推荐阅读