Javascript D3-将事件添加到条形图

我正在尝试将事件添加到图表中的条形图中。我尝试了下面的

函数

，但使用该函数，无论单击哪个栏，它都会返回

数组中最后一个
键

我猜这与异步有关，因为它返回最后一个
键
值

for (var key in data) {
  bar = bars.append('rect')
    .attr('class', 'bar')
    .attr('x', (dimensions.width / data.length) * currentId + 41)
    .attr('y', 100 - data[key] + 10).attr('height', data[key])
    .attr('width', dimensions.width / data.length)
    .attr('fill', '#4682B4')
    .on('click', (bar = key) => {
        console.log(key) //Always returns the same key
    });
  currentId++;
}

我还尝试复制数组包含的其中一个键，并做出如下if语句：

console.log(key === 1 ? true : false);

这将返回正确的
true
和
false
。我认为这与
async
有关的另一个原因

我的基本问题是；
如何在此栏上创建一个单击事件，该事件将首先返回正确的
键
：这不是在D3中添加事件的惯用方法。一般来说，在编写D3代码时，通常不需要任何类型的循环。当然，我们有时会使用循环，但在非常特定的情况下，我们会使用循环来解决非常特定的问题。因此，在D3代码中发现的98.57%的循环是不必要的（来源：FakeData Inc.），无论是针对
中的…的
、针对
的…的
还是针对
循环的简单

话虽如此，让我们看看这里发生了什么

真正的问题与D3或异步代码无关。事实上，你的问题可以用这个很好的答案来解释：（不过，我不会把它当作重复来结束）

在阅读了上面链接中的答案后，让我们看两个演示

第一个，使用
var
。请点击圆圈：


var数据=[{
姓名:"富",，
价值：1
}, {
名称：“酒吧”，
价值：2
}, {
名称：“baz”，
价值：3
}];
var svg=d3.选择（“svg”）；
for（var输入数据）{
var foo=key；//看看这里的变量
circle=svg.append（“circle”）
.attr（“cy”，50）
.attr（“填充”、“teal”）
.attr（“cx”，d=>20+键*50）
.attr（“r”，15）
.on（'单击'，（）=>{
console.log（foo）
});
}

您是否可以提供一个指向声明来源的链接“一般来说，当您编写D3代码时，您通常不需要任何类型的循环。”？该声明的来源是我的专业经验和任何经验丰富的D3编码器的经验。你可以在任何关于D3的教程、书籍或文档中看到它。这张由D3创建者Mike Bostock编写的页面是一个很好的起点：正如他所说，“……在你发布一个for循环和蛮力之前，想想这个D3例子中的一个神秘的序列……”