This is the code for Chapter 1, Figure 25 from D3.js in Action showing simple data binding using an array of filler data (literally an array of four instances of the word “filler”). This highlights three key aspects of data binding:
- The number of elements created by the .enter() behavior is the length of the data array referenced in .data() minus the number of elements bound to the selection. In other words, because the selection in this example already has one div element created (the div onscreen with a gray border) then only three new elements are created by .enter() despite there being four datapoints in the array.
- Multiple elements can be created for each enter event. Here, a div and a child span are created for each datapoint.
- Only the number of elements created is tied to number of array values–the content of the elements does not need to be based on the content of the data. Here, the new div and span elements are filled with text that has nothing to do with the data array.