Javascript 将当前参数传递给循环中的函数

我用D3打印出多个rect。现在我希望rect可以允许用户点击它并激活一些功能

例如，有3个矩形，

“汤姆”

，

“玛丽”

和

“本”

。当用户单击不同的rect时，它将传递当前值。就像我点击

“Tom”

时，它会传递

“Tom”

来调用函数

但是，我发现在打印完rect之后，无论我单击哪个rect，它们都返回数据集的最小值

在我的示例中，即使我单击

“Tom”

或

“Mary”

，两者都返回

“Ben”

for（变量i=0；i

您的问题完美地说明了一个非常重要的原则，如果您愿意，在编写D3代码时，这是一条经验法则：切勿使用循环来附加元素。改用enter/update/exit模式

当您使用循环（无论是

for

，

while

，

forEach

等）时发生的情况是，不仅没有数据绑定，而且您还会遇到您描述的奇怪结果（总是得到最后一个值），如下所述：

因此，使用D3惯用enter选择的解决方案是：

const data = ["Tom", "Mary", "Ben"];

const svg = d3.select("svg");

const rects = svg.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  //etc...

然后，在

单击
侦听器中，您将获得第一个参数，即数据：

.on("click", function(d) {
    console.log(d)
})

下面是一个演示：


const data=[“汤姆”、“玛丽”、“本”]；
const svg=d3.选择（“svg”）；
const rects=svg.selectAll（空）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“宽度”，50）
.attr（“高度”，150）
.attr（“x”，“i=>i*60）
.打开（“单击”，功能（d）{
控制台日志（d）
})


.on("click", function(d) {
    console.log(d)
})