Question

冒险进入D3区域并试图用工具提示来建立一个简单的条形图，但是似乎我无法访问传递给mouseover事件的数据：

chart.on("mouseover", function(d){
      return tooltip.style("visibility", "visible")
                    .text(d.name + " - " + d.calories + " cal");
      
    })

Heres a codepen link

想问我所有答案，因为我有点糊涂了

Answer 1

尝试以下方法：

chart.selectAll("rect").on("mouseover", function(event, d){ 
  return tooltip.style("visibility", "visible")
    .text(d.name + " - " + d.calories + " cal");
})

我看到两个错误：

分配mouseover事件时，需要在每个rect而不是chart上进行。因此，chart.selectAll("rect").on部分对此进行了修复。
mouseover处理函数的第一个参数是event而不是data。第二个是data。因此，您需要执行function(event, d)而不是function(d)

这是更新后的示例：https://codepen.io/cypark/pen/NWrdpzd

D3工具提示在悬停时显示d的问题

1 个答案: