为单击事件定义和调用函数，而不是内联函数

Question

我可以为任何节点上的点击事件定义一个内联函数，但我试图让代码更干净，所以我想声明我的函数，并为点击事件调用它。

这是内联版本：

node.on("click", function(n){
var active = !n.active ? true :false;
console.log(active);
})

这是带有函数调用的版本：

node.on("click", linkSwitch(n));
linkSwitch(n){
var active = !n.active ? true :false;
console.log(active);
}

仅适用于函数调用版本。我得到这个错误：

Uncaught ReferenceError: n is not defined

我不知道为什么？？

Answer 1

当您执行此操作时。。。

node.on("click", function(n){

参数n对应于D3自动传递给匿名函数的第一个参数，即数据。

然而，当你这样做时：

node.on("click", linkSwitch(n));

你有两个问题：

1. 你的n显然是未定义的，所以这个错误没有什么奇怪的，这是意料之中的
2. 您不是在点击时调用函数：而是立即调用函数并返回其值

解决方案：应该只是：

node.on("click", linkSwitch)

这里有一个演示：

const data = [{
name: "foo",
active: true
}, {
name: "bar",
active: true
}, {
name: "baz",
active: true
}];
const paragraphs = d3.select("body")
.selectAll(null)
.data(data)
.enter()
.append("p")
.text(d => d.name);
paragraphs.on("click", linkSwitch);
function linkSwitch(n) {
var active = !n.active ? true : false;
console.log(active);
}

<script src="https://d3js.org/d3.v5.min.js"></script>

PS：一些附加问题：

• 函数声明中缺少function
• 函数中的逻辑可以缩短为var active = !n.active