子弹图示例

时间:2012-05-23 18:14:48

标签: d3.js bullet-chart

我引用了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函数开始执行时,它会在执行到它时开始执行子弹函数还是等待显式调用?因为我从未真正看到明确要求的子弹(g)?

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

1 个答案:

答案 0 :(得分:5)

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

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

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

如果您不熟悉Javascript,可能有助于查找一些关于其更具异国情调的功能的教程材料,例如闭包。