Question

我正在学习D3，我正在寻找一种定义带有参数（d，i）和一个额外参数“ arg”的函数的方法。问题是，稍后我需要使用参数“ arg”来调用它，并且由于任何原因它均不起作用，这里我举一个例子：

<!doctype html>
<meta charset="utf-8">
<title>my first d3</title>

<body>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>
    var data = [10, 20, 30, 40];

    var arg = 10;

    var lis = d3.select("body")
      .append("ul")
      .selectAll("li")
      .data(data)

    lis.enter()
      .append("li")
      .text(example(d, i, arg))

    function example(d, i, arg) {
      var c = i + arg;
      return "item n° " + c + " has value: " + d
    }
  </script>
</body>

请注意，如果没有“ arg”并像“ example”一样调用它，它将起作用。谢谢！

Answer 1

执行此操作时...

.text(example(d, i, arg))

...您正在立即调用example（使用不存在的变量）并将其结果传递给text()方法，这不是您想要的。如您所知...

请注意，没有“ arg”并像“ example”一样调用它就可以。

那是因为...

.text(example)

...与...相同：

.text(function(d, i, n){
    return example(d, i, n);
})

...其中d，i和n是传递给匿名函数的默认参数。

因此，如果要使用datum方法中默认传递给匿名函数的index和text()，则必须将调用包装到{{1} }在该匿名函数中：

example

这是您所做的更改的代码：

  .text(function(d, i) {
      return example(d, i, arg)
  })

使用具有默认值和额外参数的函数

1 个答案: