D3柱状图添加Tooltip遇问题：内容显示undefined

问题根源 #

你遇到的问题是D3 v6及以上版本调整了事件处理函数的参数顺序：

• 旧版（v5及更早）中，事件处理函数第一个参数是数据d，第二个是索引i
• 新版（v6+）中，第一个参数是事件对象event，第二个才是数据d，第三个是索引i

你的代码沿用了旧写法，导致d实际拿到的是事件对象，自然d[0]会显示undefined。同时d3.event在v6里已被移除，需要用函数参数里的event对象替代。

修复方案 #

修改事件处理代码 #

把mouseover和mouseout的函数参数调整为新顺序，同时替换d3.event：

.on("mouseover", function(event, d) {
    tooltip
      .transition()
      .duration(200)
      .style("opacity", 0.9);
    tooltip
      .html(`${d[0]}<br>$${d[1]}`)
      .style("left", event.pageX + 20 + "px")
      .style("top", event.pageY + 20 + "px");
    tooltip.attr("data-date", d[0]);
  })
.on("mouseout", function(event, d) {
    tooltip.attr("data-date", d[0]);
    tooltip
      .transition()
      .duration(400)
      .style("opacity", 0);
})

额外优化（可选） #

你的yScale定义存在冗余代码，可简化：

// 原冗余写法
const yScale = d3.scaleLinear([0 , d3.max(json.data, (d) => d[1])])
.domain([0 , d3.max(json.data, (d) => d[1])])
.range([0 , h - (2 * padding)]);

// 简化后
const yScale = d3.scaleLinear()
.domain([0, d3.max(json.data, d => d[1])])
.range([0, h - 2 * padding]);

修改后，鼠标悬停柱状图时，Tooltip会正确显示日期和对应的GDP数值，不会再出现undefined。

内容的提问来源于stack exchange，提问作者crmarc