Question

我能够在任何节点上为click事件定义一个内联函数，但是我试图使我的代码更简洁一些，所以我想声明我的函数，并为click事件调用它。

这是嵌入式版本：

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

您有两个问题：

您的n显然是未定义的，因此对该错误的预期并不奇怪；
您不是在单击时调用该函数：而是在立即调用函数并返回其值。

解决方案：应该是：

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

为click事件定义和调用函数而不是嵌入式函数

1 个答案: