javascript - 为点击事件定义和调用函数而不是内联函数

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 自动传递给匿名函数的第一个参数，即 datum。

但是，当您这样做时:

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:一些额外的问题:

• 您在函数声明中遗漏了函数；
• 函数中的逻辑可以简化为var active = !n.active