Javascript库d3调用函数

时间:2012-10-09 17:32:01

标签: javascript d3.js

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

有人可以具体解释这件作品是做什么的

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

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

2 个答案:

答案 0 :(得分:92)

我认为这里的技巧是要理解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"));

答案 1 :(得分:4)

IMO接受的答案是.call()D3 API function,不要与Function.prototype.call()混淆

selection.call(function[, arguments…])

仅一次调用指定的函数,并将此选择与任何可选参数一起传递。返回此选择。这等效于手动调用功能,但有助于方法链接。例如,要在可重用函数中设置几种样式:

现在说:

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

这大致相当于:

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

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