从d3中的函数内部调用函数

Question

我怀疑关于d3的工作原理是一个相当基本的问题。 我从这段代码开始，它可以完美地运行并触发nodeClick动作...

var nodeEnter = node.enter()
                        .append("g")
                        .attr("class", "node")
                        .on("click", nodeClick)

但是后来我将其更改为使用单击功能来确定是使用单击还是双击...

.on("click", function(d) {
                            if some logic ()  {
                               console.log("double click");
                            } else {
                                console.log("single click only");
                                nodeClick;
                            }
                        })

就输出正确的控制台消息而言，这非常有效，但是似乎我对nodeClick的调用在嵌入到函数中时无法正常工作（即，未触发节点点击行为）。 我尝试更改为nodeClick（）和nodeClick（d），但这只会导致错误。

我是否缺少可以解释这种行为的东西？ 我似乎很奇怪，我看到从函数的内部和外部调用“ nodeClick”有两种不同的行为。

谢谢你的帮助！

这是有问题的完整代码...

dblclick_timer = false;
//.on("click", nodeClick) //works perfectly
.on("click", function(d) {
    if ( dblclick_timer )  {
        clearTimeout(dblclick_timer)
        dblclick_timer = false
        console.log("double click");
        d.fixed=false;
    }
    else dblclick_timer = setTimeout( function(){
                            dblclick_timer = false
                            console.log("single click only");
                            d3.select(this).nodeClick;
                        }, 250)
})

在获得所有宝贵的反馈之后，这是在d3.event变为空之前存储它的有效解决方案...

.on("click", function(d,i) {
                            var cacheEvent = d3.event;
                            if ( dblclick_timer )  {
                                clearTimeout(dblclick_timer)
                                dblclick_timer = false
                                console.log("double click");
                                d.fixed=false;
                                force.start(); 
                            }
                            else dblclick_timer = setTimeout( function(){
                                dblclick_timer = false
                                console.log("single click only");
                                d3.event = cacheEvent;
                                nodeClick.call(d3.select(this), d, i);
                            }, 250)
                        })

Answer 1

如第一条评论所述，您必须建立正确的上下文：这是javaScript，而不是d3。 如果您树立正确this背景下，并通过相同的参数，将工作完全一样。 关键是使用Function.prototype.call来调用回调。 这是标准的javaScript 。

.on("click", function(d, i) {
                            if some logic ()  {
                               console.log("double click");
                            } else {
                                console.log("single click only");
                                nodeClick.call(this, d, i);
                            }
                        })  

如文件所述

以与其他运算符功能相同的方式调用指定的侦听器，将其传递给当前数据d和索引i，并将此上下文作为当前DOM元素。

Answer 2

正如注释中指出的那样，您实际上并不是在调用该函数。 在这种情况下

.on("click", nodeClick)

功能nodeClick()被安装为click事件的处理程序。 这里的nodeClick指向函数对象-即函数本身，而不是它为特定输入可能返回的任何值。

在第二种情况下，您正在做相同的事情，除了传递的是匿名（即现场定义）函数而不是命名函数。 在这两种情况下，事件发生时都会调用该函数。

语句nodeClick; 本身没有效果-基本上与说1;相同1; 或foo; 其中foo是在其他位置定义的变量或函数。

为此，您需要调用函数-名称后添加() 。 另外，您需要传递回调收到的所有参数nodeClick(d) 。 您还需要使用与this上下文相同的上下文来调用它，因为函数的实现依赖于它。 如果您使用selection.each() ，那么所有这些都将为您完成：

d3.select(this).each(nodeClick);