javascript - 循环传递当前参数给函数

Question

我正在使用 D3 打印多个矩形。现在我希望矩形可以让用户点击它并激活一些功能。

例如，有 3 个矩形，"Tom"、"Mary" 和 "Ben"。当用户点击不同的矩形时，它会传递当前值。就像当我点击 "Tom" 时，它将通过 "Tom" 来调用该函数。

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

在我的例子中，即使我点击“Tom”或“Mary”，都返回“Ben”。

for (var i = 0; i < ward_set.length; i++) {
  var ward_id = ward_set[i];
  legend.append("rect")
    .attr("x", legend_x + 180 + 100 * n)
    .attr("y", legend_y)
    .attr("width", 18)
    .attr("height", 18)
    .attr("fill", colors[count])
    .attr("class", "legend" + ward_set[i])
    .on("click", function() {
      console.log(ward_id);
    });
}

Answer 1

您的问题完美地说明了一个非常重要的原则，如果您愿意，可以说是一条经验法则，在编写 D3 代码时:永远不要使用循环 来追加元素。请改用进入/更新/退出模式。

当你使用循环(for、while、forEach 等...)时会发生什么，不仅有没有数据绑定(bind)，但你也会遇到你描述的这种奇怪的结果(总是得到最后一个值)，这里有解释:JavaScript closure inside loops – simple practical example

因此，使用 D3 惯用输入选择的解决方案是:

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

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

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

然后，在 click 监听器中，您将获得第一个参数，即数据:

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

这是一个演示:

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

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

const rects = svg.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  .attr("width", 50)
  .attr("height", 150)
  .attr("x", (_, i) => i * 60)
  .on("click", function(d) {
    console.log(d)
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>