javascript - D3 onClick 处理程序在执行时似乎有错误的范围

Question

我有以下 D3 的 javascript 代码，我认为它的行为很奇怪。由于我是 D3 的新手，我可能会遗漏一些东西，但我一点也不知道。问题由警报调用标记:

我遍历一组数据集，这些数据集被绘制为线条(从代码中剥离)和这些线条上的圆圈/点。当我点击圆圈时，我想在 onClick 处理程序中执行一些代码。 onClick 处理程序是传递给 D3 on() 方法的每个循环迭代的更接近定义。到目前为止，相当普通的 javascript 东西。但是:

第一个警报总是显示正确的值，正如我所期望的那样。我希望将 chartDataItem 的值绑定(bind)到 onClick 闭包，因此它在被调用时应该具有相同的值。但是如果执行 onClick，我总是从上次迭代中获取值。

D3 on() 方法有什么我没有看到的特殊之处吗？

for(var i=0; i<chartData.length; i++){

    var chartDataItem = chartData[i];
    var currentData = chartDataItem["data"];

    alert(chartDataItem["name"]); // <- displays the correct value per iteration
    var onClick = function(d){
        alert(chartDataItem["name"]); // <- should bind chartDataItem to the scope of the closure?!
    }

    var dataLines = lineChart.dataLinesGroup.selectAll('.data-line color' + i)
            .data([currentData]);

    // Draw the lines
    ...

    // Draw the points
    lineChart.dataCirclesGroup = lineChart.svg.append('svg:g');

    var circles = lineChart.dataCirclesGroup.selectAll('.data-point color' + i)
        .data(currentData);

    circles
        .enter()
            .append('svg:circle')
                .attr('class', 'data-point color' + i)
                .style('opacity', 1e-6)
                ... more attr and style calls ...
                .on("click", onClick)
            .transition()
            .duration(0)
                .attr('cx', function(d) { return x(d.title) })
                .attr('cy', function(d) { return y(d.value) })
                .style('opacity', 1);
    ...
}

Answer 1

创建 javascript functions in a loop有点棘手；在循环的每次迭代中，chartDataItem 都被重新定义。由于每个 onClick 函数都会查看 chartDataItem 以查看要提醒的文本内容，因此每次都会提醒 chartDataItem 的最后一个值。您可以通过运行

来验证这一点

chartDataItem = 'test alert'

循环运行后在控制台中，然后单击任何圆圈。

为了解决这个问题，您可以使用闭包来防止每个函数的警告文本被修改:

var onClick = function(alertText){
  return function(){ alert(alertText); };
}(chartDataItem['name']);

或者，使用 .forEach()而不是 for 循环通过在它自己的函数中执行循环的每个循环来避免这个问题。

更好的解决方案:http://bost.ocks.org/mike/nest/