Javascript d3.js 绑定(bind)点击事件与 'immediate invoked function'

Question

我正在尝试跟踪 d3 图表中的哪个圆圈被点击，为此我使用了以下按预期工作的代码:

var svg = d3.select('#test');

    for (var i=0; i < 5; i++){
        svg.append('circle')
            .attr('r', 5)
            .attr('cx', function(){return 10+ i*11} )
            .attr('cy', 10)
            .on('click', 
                function(d){
                    return function(){console.log(d)}
                }(i)
            );
    }

现在我想重用部分代码，唯一的变化是点击事件的功能。我尝试执行以下操作:

    function logging(){
        console.log(d);
    }

    for (var i=0; i < 5; i++){
        svg.append('circle')
            .attr('r', 5)
            .attr('cx', function(){return 10+ i*11} )
            .attr('cy', 30)
            .style('fill', 'purple')
            .on('click', 
                function(d){
                    return logging
                }(i)
            );
    }

但这并不像我预期的那样有效。它记录未定义而不是 0、1、2、3 或 4。我尝试了带括号、额外参数、var loggin = function.... 的不同版本，但我无法让它工作.

fiddle https://jsfiddle.net/t1vhvLqy/

Answer 1

您的第一个示例之所以有效，是因为 IIFE 创建了一个闭包，该闭包使用正确的参数调用日志函数，即 d设置为 i 的当前值.

您的第二个示例确实返回了一个函数 ( logging ) 但没有任何闭包，代码等同于 .on('click', logging) .

要按照您的意愿进行这项工作，只需替换 console.log例如，通过调用您的函数

.on('click', 
    (function(d){
        return function(){ logging(d); }
    })(i)
)

还有一个演示 https://jsfiddle.net/nikoshr/t1vhvLqy/1/