block by migurski 4601038

Small example showing D3 data with and without a key function. D3 takes a second argument to the data() method, a function that returns a join key for each data element passed in. Without this, it assumes that the array index and not the array element are important. I had been passing in three-element arrays, and D3 assumed that I was updating array values in-place rather than attempting to introduce new ones. This example shows D3's set behavior with and without the use of a key function. The visible results are the same in both cases, but the second one (by value) adds and removes many more div elements than the first (by index). The first version might be used to update the heights of bars in a bar chart in-place, while the second might be used to animate the addition and removal of bars.

Full Screen