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)
            );
    }

现在我想重用部分代码，唯一的变化是click事件的功能。我试着做以下事情：

    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 ....但我无法使其工作。
在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/

javascript d3.js使用'立即调用函数'绑定点击事件

1 个答案: