Javascript 是否有办法使用D3V6.1.1中的工具提示功能通过单击事件获取指定数据

根据迁移指南，单击事件必须在单击的栏中显示数据。 无法获取此代码中的错误：

d3.on（'click'，（事件，d，i）=>{
tooltip.classList.add（'show'）；
tooltip.style.left=i*barWidth+padding*2+'px'；
tooltip.style.top=高度-填充*4+'px'；
tooltip.innerHTML=`${d[0]}$${d[1]}十亿`；
setAttribute（“数据日期”，d[0]）；
})
.on（'单击'，（）=>{
tooltip.classList.remove（'show'）命令
}

您似乎错过了有关d3缩放的某些内容。通常，您使用

.data（）

分配对象，如

.data（[{name:'hello world'，value:12}]）

。但是，您使用的是

scaledGDP

，这意味着它丢失了所有其他信息，只是一个数字。如果您使用

GDP

，则可以使用例如

rect.attr（'height'，function（d）return linearScale（d）；}）访问缩放值

除此之外，您的工具提示不起作用有两个原因。首先，您在（'click'）上指定了两次

。一次添加工具提示，一次删除。第二次重写了第一次。其次，您像HTML元素一样使用
tooltip
，但这是一个
d3
选择，所以请使用
.classed（）
而不是
classList（）
，等等。最后，正如《迁移指南》中所说，
event
现在是函数的第一个参数，而不是
d

所有这些都提供了以下信息：

CSS:

#工具提示{
不透明度：0；
}
#tooltip.show{
不透明度：1；
}

Javascript

    .on("click", (event, d, i) => {
      if(!tooltip.classed("show")) {
        tooltip.classed("show", true)
          .html(`<small>${d[0]}</small>$${d[1]} billions`)
          .attr("data-date", d[0])
          .style("left", i * barWidth + padding * 2 + "px")
          .style("top", height - padding * 4 + "px");
      } else {
        tooltip.classed("show", false);
      }
    });

.on（“单击”（事件，d，i）=>{
如果（！tooltip.classed（“show”））{
工具提示。已分类（“显示”，真）
.html（`${d[0]}$${d[1]}十亿`）
.attr（“数据日期”，d[0]）
.style（“左”，i*条宽+填充*2+像素”）
.样式（“顶部”，高度-衬垫*4+“px”）；
}否则{
工具提示。已分类（“显示”，错误）；
}
});

它还没有填充工具提示-因为scaledGDP

vs

GDP

这件事，但它显示并定位了它。

.on（'click'，function（event，d，i）{var padding=40 var height=400 var barWidth=width/275；if（！tooltip.classed（“show”）{tooltip.classed（“show”，true）。html（

${d[0]}${d[1] }billions

）.attr（“数据日期”，d[1]）.style（“左”，i*barWidth+padding*2+“px”）.style（“顶部”，height-padding*4+“px”）；}其他{tooltip.classed（“show”，false）；}在console中获取结果需要在环境中使用，并且很抱歉，如果它有问题，我不理解您的意思，请不要有问题，单击事件不起作用，评估后发现未定义barWidth、padding、height变量。根据上述代码定义后，它没有错误，但功能是failing显示指定的条形图数据我不沮丧，别担心。我用了你的代码笔，看看是否可以修复。我建议使用DiffChecker之类的工具查看我所做的所有更改

    .on("click", (event, d, i) => {
      if(!tooltip.classed("show")) {
        tooltip.classed("show", true)
          .html(`<small>${d[0]}</small>$${d[1]} billions`)
          .attr("data-date", d[0])
          .style("left", i * barWidth + padding * 2 + "px")
          .style("top", height - padding * 4 + "px");
      } else {
        tooltip.classed("show", false);
      }
    });