我无法理解d3.call()的工作原理以及何时何地使用它。这是我尝试完成的教程链接。
有人可以具体解释一下这件作品在做什么吗
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
svg.append("g").call(xAxis);
我认为这里的诀窍是理解 xAxis 是一个生成一堆 SVG 元素的函数。实际上它是d3.svg.axis()
返回的函数。缩放和定向函数只是链接语法的一部分(在此处阅读更多内容:http://alignedleft.com/tutorials/d3/chaining-methods/)。
因此,svg.append("g")
将 SVG 组元素附加到 svg 中,并以选择的形式返回对自身的引用(此处相同的链语法)。对选择使用 call
时,您将在选择g
的元素上调用名为 xAxis
的函数。在本例中,您将在新创建和追加的组上运行轴函数 xAxis
g
。
如果这仍然没有意义,上面的语法等效于:
xAxis(svg.append("g"));
或:
d3.svg.axis()
.scale(xScale)
.orient("bottom")(svg.append("g"));
IMO省略了什么,.call()
是一个D3 API函数,不要与Function.prototype.call()混淆
selection.call(function[, arguments…])
只调用指定函数一次,将此选择与任何可选参数一起传入。返回此选择。这等效于手动调用函数,但有助于方法链接。例如,要在可重用函数中设置多个样式:
现在说:
d3.selectAll("div").call(name, "John", "Snow");
这大致相当于:
name(d3.selectAll("div"), "John", "Snow");
其中名称是一个函数,例如
function name(selection, first, last) {
selection
.attr("first-name", first)
.attr("last-name", last);
}
唯一的区别是 selection.call 始终返回选择,而不是被调用函数 name 的返回值。