Binding functions as data

One of the benefits of D3's excellent support for functional-style JavaScript programming is that it allows functions to be treated as data as well. This particular feature can offer some very powerful capabilities under certain circumstances. This is a more advanced recipe. Don't worry about it if you are new to D3 and have some difficulty understanding it at first. Over time, this functional programming usage will become natural to you.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter3/function-as-data.html .

How to do it...

In this recipe, we will explore the possibility of binding functions as data to your visual elements. This capability is extremely powerful and flexible, if used correctly:

<div id="container"></div> 
 
<script type="text/javascript"> 
    var data = []; // <- A 
    var datum = function (x) { // <- B 
...