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().缩放和定向函数只是链接语法的一部分(在这里阅读更多内容: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"));

总体上，这很好地解释了.call（）方法。它没有特别说明调用轴对象的后果。并不能证明轴对象的超现实情况像**对象和函数**一样合理。为什么要这么做？好的，因此文档称其为[渲染轴]（https://github.com/d3/d3-axis/blob/master/README.md#_axis）。这比给轴对象提供.render（）方法更好吗？那不支持更简单的xAxis.scale（...）。orient（...）。render（...）` (3认同)
来自选择调用中的文档：“唯一的区别是选择。调用始终返回选择而不是被调用函数的返回值，名称。” (2认同)

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

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