Enter-Update-Exit Pattern

[00:00:00]
>> We just finished creating our flowers. And now we want to add in this functionality of filtering these flowers, these movies. So we want to be able to filter by the genre or parental guidance rating. So let's build up to the point that we can do that together.

[00:00:24]
So in this lesson, we're going to learn how to not only create DOM elements from scratch based on the data, but what if our data changes and updates and we want the DOM to update to match that. So let's take a look at our simple bar chart again.

[00:00:44]
Here's the current data we have. And let's say that this is already being rendered to the DOM. And it's already being bound to the five rectangles in the SVG. And let's say this is the new data that we want to update to inthis kind of a rray of integers.

[00:01:12]
And so this is where you might have heard of this before the enter update exit pattern. And this is where that pattern comes in. And so the very first thing that we need to do is actually the .data function again. The .data is really powerful because it not only binds our data to our selection and also calculates our enter selection for us.

[00:01:38]
It also calculates our update and exit selection as well. And to help with that, we'll oftentimes use this thing called a key function. So, previously, we had our svg and we've selected all of our rectangles. And actually now what we have in our svg is these five rectangles with all of our previous data bound to it.

[00:02:08]
So this part should return, this .selectAll rectangles should return a selection of these five rectangle elements. And we'll call .data on that and you can see, like before, we'll pass in an array of data. So we'll pass in that new data of the eight integers. And then the new thing that we're learning is this part, this thing called a key function.

[00:02:37]
And what a key function is that is, we tell D3 what to access in the bound data to control which data, so which of these new data is assigned to which elements in the selection. And I wanna make a note that currently this example that we're showing is quite trivial because we're using just the boundary integer on each of these rectangle elements.

[00:03:07]
But usually in the charts or virtualizations that we might make, usually we'll be passing in and binding an object to each of our DOM elements. And them in that object, we'll you usually have a unique ID. And that unique ID is what we should be returning in our key function so that D3 knows how to match up the new data with our DOM.

[00:03:33]
Let's take a look at what .data is actually doing for us underneath the hood. So with the key function, now D3 can calculate our exit, update, and enter selections. And so the way that it does that is first, actually yeah, so the first way that it calculates the update selection is that it takes a look at the new dataset.

[00:04:08]
And it takes a look at our rectangle elements and it says, hey, 84 and 45 is already in our DOM in the rectangles. And it's in the new data set too. So we're going to call that the update selection. So those are the two rectangle elements that match the new data.

[00:04:30]
So they'll remain on the screen and that's the update selection. It will also calculate the exit selection. And so those are the three currently existing three rectangle elements. So these three that have datum bound not in the new data array, so we must remove them from the DOM.

[00:05:00]
And finally, we have the enter selection. And the enter selection is D3 takes a look at the new data and it sees these six data elements that are new and not currently existing in the DOM here. So it makes a note that it needs to be created. And just a little bit of a small note that if we haven't provided a key function, D3 actually defaults to using the integer of our data array as the key instead.

[00:05:41]
So here's what the D3 selection looks like with the new data bound. I also find this one really interesting. So first of all, _groups which is what we've been looking at all along and it is kind of what the selection is. In this case, when .data returns it, _groups represents our update selection.

[00:06:11]
And if you open that up, you can see that it is consisting of three empty slots and two of the rectangle elements. And those two rectangle elements are the ones 84 and 45 that also exist in the new data. So .data keeps track of the update selection in this way.

[00:06:41]
And then if we take a look at the exit selection, you can see that it is, The other three of our rectangles that aren't in the new data set. And it's very interesting. I think it's really interesting how they keep track of it. And finally, for the intersection, here is the enter selection.

[00:07:13]
And it's very similar to what we saw before where we have these place holder elements for each of the new data elements. And then where these two existing rectangle elements should go remain empty. And actually it is the update selection already puts our existing elements in the order that they should go in.

[00:07:45]
So you can see thatit already says there's two empty at the beginning, because there's two placeholder items elements that need to be created. Then it's the current existing element empty, and then it kinda maps that way. So by the time .data returns this, we've actually also reordered the existing DOM elements to match the order of the new data array.

[00:08:15]
Because if you noticed in the update selection, 45 and 84 were at different places and then they've kind of switched around in the new data array.