javascript - Javascript库d3调用函数

Question

我无法理解 d3.call() 如何工作以及何时何地使用它。这是我正在尝试完成的教程链接。

有人可以具体解释一下这件作品在做什么吗

var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom");

svg.append("g").call(xAxis);

Answer 1

我认为这里的技巧是要理解 xAxis 是一个生成一堆 SVG 元素的函数。其实就是返回的函数d3.svg.axis()。scale 和 orient 函数只是链接语法的一部分（在此处阅读更多内容：http: //alignedleft.com/tutorials/d3/chaining-methods/）。

因此，svg.append("g")将 SVG 组元素附加到 svg 并以选择的形式返回对自身的引用（此处使用相同的链语法）。当您call在选择上使用时，您正在调用在xAxis选择元素上命名的函数g。xAxis在这种情况下，您正在新创建和附加的组上运行轴函数, g。

如果这仍然没有意义，上面的语法相当于：

xAxis(svg.append("g"));

或者：

d3.svg.axis()
      .scale(xScale)
      .orient("bottom")(svg.append("g"));

Answer 2

IMO 所接受的答案.call()是D3 API 函数，不要与Function.prototype.call()混淆

selection.call(function[, arguments…])

只调用一次指定的函数，并传入此选择以及任何可选参数。返回此选择。这相当于手动调用函数，但有助于方法链接。例如，要在可重用函数中设置多个样式：

现在说：

d3.selectAll("div").call(name, "John", "Snow");

这大致相当于：

name(d3.selectAll("div"), "John", "Snow");

其中 name 是一个函数，例如

function name(selection, first, last) {
  selection
      .attr("first-name", first)
      .attr("last-name", last);
}

唯一的区别是 selection.call总是返回选择而不是被调用函数name 的返回值。