Join vs Enter-Update

[00:00:00]
>> And so now that we have all of these different selections calculated, and we're going to use that to update the DOM. And there are actually two valid ways to update the DOM, and they result in exactly the same, it's the exact same end result. But there is an old way and a new way.

[00:00:23]
So let's start with the old way. So with the old way, what we're going to do is, We're going to take this rect, which is a D3 selection with all of our select currently existing five rectangles. I'm sorry, I misspoke. Sorry, this rect is what the .data returned us.

[00:00:49]
So it's the one that has the update selection, enter selection, exit selection and this rect itself represents the update selection. And you'll see what I mean in a little bit. So from rect, let's grab the exit selection with this .exit, and we'll tell D3 that this selection of the three rectangle elements, let's remove it from the DOM.

[00:01:19]
The second thing we do in this old way is, we go ahead and we grab the enter selection, and we create the new rectangles. And then, the best practice I used to follow is to set attributes on that enter selection. We're going to set attributes that don't depend on the data.

[00:01:46]
And then we're going to put that in this variable enter. And finally, we want to grab everything that is either existing, so our update selection and our newly created rectangle elements so that's our enter selection. And we want to merge those together, the enter and update selections, and that new merged selection is what are going to be in the DOM that perfectly reflects what's in the new data array.

[00:02:30]
So, enter and update selections together, is going to be what's in the DOM by the end of all of this to perfectly match what's in the new data array. So enter.merge, and then for that selection, we're going to set attributes that change when the data changes. And the reason why we want to kind of do it that way where enter is setting attributes that don't depend on the data and with the enter+update is the attributes that do depend on data is because we want to make sure to call these.

[00:03:13]
We want to make sure to set these attributes every time the data updates, and that's why we do it here. So that's the old way. And now the new way, which I think is really nice. So the new way is just like before, we go and grab our SVG element.

[00:03:42]
We select all of the existing rectangles, which is those five existing rectangle elements. We bind the data as before with our key function, and now we call this function called .join. We're going to tell .join that we want to be creating or removing rectangles. And this one line if .join takes care of all of the enters and exits that we explicitly called in the old way.

[00:04:19]
And that's really exciting because that cuts out a lot of lines of code. So, in this one line and this .join, what it returns is that final enter and update selection merged together so that we get that selection all of the DOM elements that matched in your data array.

[00:04:43]
So because we get that enter and update selection, we can set all of our attributes on it. We can set all of our attributes that are dependent on the data and we can set all of our attributes that are not dependent on the data. And these few lines, Do the exact same thing as all of these lines that I showed you previously.

[00:05:07]
So the new way is really, really nice. And if we want to access specific selections, because maybe we want to do specific things on just the enter selection because maybe like before with our flowers, we have a nested SVG or nested structure. So then maybe when we create an enter our group elements, maybe we need to also create an enter all of our paths and all of our text.

[00:05:38]
In that case, we have this thing where we can call .join and instead of saying that we want to render rectangles, we pass in these functions of the first function is that we get back and we pass in the function. And we'll get as input the enter selection, From .data and the important thing is that we need to then return the enter.append, so we need to return that enter selection with all of the rectangles created.

[00:06:29]
And then here, we can set attributes or whatever we need to do for the enter selection. And we can do the same thing with the update selection. Although here, I'm showing it as just returning that update selection because I haven't really ever come across too many use cases where I need to operate on just only the update selection, only the existing DOM elements.

[00:06:59]
But certainly you can do exactly the same thing as here, here and finally, a third function where we get passed in the exit selection and we can do whatever we might need to with that. And I should also note that, you don't have to pass in update and exit, you can pass in just enter, so the rest of these are optional.

[00:07:25]
And finally, just as previously .join returns the enter+update selection so we can also chain attributes down here after. So the new way really is much more convenient than the old way. But I wanted to show you the old way first because I think it's really quite important to understand where this new way came from, the thought process behind it.

[00:07:55]
And kind of how to think through, the enter selection, the update selection and the exit selection.