Javascript d3.js 绑定点击事件与 '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 的当前值。

您的第二个示例执行 return 函数 (logging) 但没有任何闭包，代码等同于 .on('click', logging).

要按照您的预期进行，只需将 console.log 替换为对您的函数的调用，例如

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

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

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

Javascript d3.js binding click event with 'immediate invoked function'

javascript

dom-events

d3.js