In our previous section on data binding we saw how we can attach data to DOM elements. This provides us with two sets – DOM elements set and the data set. While binding data it may happen that there are surplus/less number of entries on either set. This leaves us with three scenarios:
- The number of DOM elements are less than the number of data points in the data set. This means that we need to add the missing elements to the DOM. These data points which don’t have a corresponding DOM element yet and are ready to enter the DOM in the form of DOM visual elements form the Enter set.
- The number of DOM elements are more than the number of data points in the data set. This means we have to remove the surplus DOM elements for which there is no corresponding data point as a DOM element without a data point attached to it is useless. These surplus DOM elements form the Exit set.
- The number of DOM elements are same as the number of data points in the data set. These DOM elements have proper data binding and may need update if the corresponding data value changes. Hence these DOM elements form the Update set.
Here is a visual representation of the three set we just learned:
Ok but how do we get these three sets in our code. The answer lies in the data binding process where we use the selection’s data() method. Lets see what is the return value of data().
Consider we have the following HTML document:
Now lets bind data to our DOM:
The output of calling data() method on our selection is shown below:
As you can see the data() method returns a new Selection object which contains following important properties:
- _enter : This contains three nodes (EnterNodes) as there are three data values for which there is no corresponding circle element in DOM. If you expand each of these EnterNodes you will see the __data__ attribute having values 30, 40, 50.
- _exit : Since the set of DOM elements (circles here) are on the deficit side, there is no element to be removed from the DOM. Hence the _exit property doesn’t has any node.
- _groups : This contains two circles from our DOM as these were already existing and data is bound successfully to them. So this constitutes our Update set.
So whenever we call data() on a selection we get information about all the three sets.
D3 has methods called enter() and exit() which can be chained to data() method to get the corresponding set.
Using enter() to add new DOM elements
As per our above example, we now have three new circle to add to our DOM. Here is how it is done:
Using exit() to remove surplus DOM elements
Now we know what enter-update-exit means in D3. Lets combine these three concepts to write The Enter-Update-Exit Pattern (The Update Pattern).
The Update Pattern
That covers the update pattern. Hope I was able to make this concept clear. Please take a moment and grasp this concept because from here on we will be using this a lot.
In the next section we will see how we can use the concept of data binding and the update pattern to create some charts.