Bullet Chart Example

Question

I'm referencing the bullet chart example at D3 v2.4.2 github repository.

I have a few question to help clarify what is happening in this example.

1) In the bulletChart function there are 8 declarations in the form bullet.ranges = function(x) {}, bullet.markers = function(x) {} etc. Where is this bullet object coming from? Is it built into the library? I thought we had already set the variable ranges to the function bulletRanges, or are these 2 different ranges variables?

2) What is actually going on inside these functions?

3) Last question. When the bulletChart function starts executing does it start executing the bullet function as execution comes to it or does it wait for an explicit call? Because I never actually see bullet(g) called explicitly?

This library can be really confusing. Any help greatly appreciated.

Answer 1

1) The bullet at the start of the name refers to the function of the same name created in line 70. The calls add members to the object, which is also callable. It's basically a way of allowing to customise the returned object. In OO terms, bullet is an object and the functions define accessors for its members. The functions bulletRanges etc. provide similar functionality for the outer bulletChart function. In OO terms, think nested objects.

2) See 1. The functions are accessors for the variables that are defined inside the bullet function and allow to customise the behaviour this way. Again, the OO equivalent would be private members of an object that are exposed through accessors.

3) The return value of the bullet function is the callable object. This is what bulletChart returns. So the function call in the example happens in lines 19 and 36 (through a d3 function) by passing variable chart to the .call function. The assignment of chart in line 5 is what invokes the code that constructs the objects and callable closures.

If you're unfamiliar with Javascript, it might help to look up some tutorial material on its more exotic features, like closures.