我怀疑这是一个关于 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 变为 null 之前存储它的工作解决方案...
.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)
})
最佳答案
正如第一条评论中所述，您必须建立正确的上下文:它是 javaScript 的东西，而不是 d3 的东西。如果您建立正确的 this 上下文并传递相同的参数，它将完全相同。关键是使用 Function.prototype.call 来调用回调。这是standard javaScript .
.on("click", function(d, i) {
if some logic () {
console.log("double click");
} else {
console.log("single click only");
nodeClick.call(this, d, i);
}
})
如 documents 中所述
The specified listener is invoked in the same manner as other operator functions, being passed the current datum d and index i, with the this context as the current DOM element.
关于javascript - 从 d3 中的函数内部调用函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31190726/