子弹图示例

Question

我引用的是the bullet chart example at D3 v2.4.2 github repository。

我有几个问题可以帮助澄清此示例中发生的情况。

1) 在 bulletChart 函数中，表格中有 8 个声明 bullet.ranges = function(x) {}, bullet.markers = function(x) {} 等等。这个子弹对象来自哪里？它是内置在库中的吗？我以为我们已经将变量范围设置为函数 bulletRanges，还是这两个不同的范围变量？

2) 这些函数内部到底发生了什么？

3) 最后一个问题。当 bulletChart 函数开始执行时，它是在执行时开始执行子弹函数还是等待显式调用？因为我从来没有真正看到过明确调用的 bullet(g)？

这个库真的很混乱。非常感谢任何帮助。

Answer 1

1) 名称开头的bullet 指的是在第70 行创建的同名函数。调用将成员添加到对象，该对象也是可调用的。它基本上是一种允许自定义返回对象的方法。在 OO 术语中，bullet 是一个对象，函数为其成员定义访问器。函数bulletRanges 等为外部bulletChart 函数提供了类似的功能。在 OO 术语中，考虑嵌套对象。

2) 参见 1。函数是在 bullet 函数内定义的变量的访问器，并允许以这种方式自定义行为。同样，OO 等价物将是通过访问器公开的对象的私有成员。

3)bullet函数的返回值是可调用对象。这就是bulletChart 返回的内容。因此，示例中的函数调用发生在第 19 行和第 36 行（通过 d3 函数），通过将变量 chart 传递给 .call 函数。第 5 行中chart 的赋值是调用构造对象和可调用闭包的代码。

如果您不熟悉 Javascript，查找一些有关其更奇特功能（如闭包）的教程材料可能会有所帮助。