This course has been updated! We now recommend you take the Introduction to D3.js course.
Transcript from the "exit() and merge()" Lesson
[00:00:00]
>> Shirley: So the exit section is actually super straightforward, which is most of the times, all we do is go and remove it. So once you get that, so, the .exit, all the .exit does is it just returns this selection for us. It just plucks out this exit selection, so that you can operate on it, and then, usually for the exit selection, all we do is remove.
[00:00:31] Sometimes we might do something fancy with, maybe we'll animate it out, like maybe we'll animate it to opacity zero or animate the height down to zero or something like that. And then remove it, but usually, all we do is remove it, because it doesn't need to be on the screen anymore.
[00:00:49] The enter selection, usually the way I think about it is I chain attributes that don't depend on the data. So like for example.
>> Shirley: I only chain attributes, for example, for this particular one, the stroke is white, always. Across all of the data changes, across all the different states, my stroke for each of these bars will always be white, so I don't need to update that on each data change.
[00:01:27] Same with the width, my width is always whatever I set my rectWidth to. So for the enter selection, chain the attributes that don't depend on the data, so that you don't have to rerun the DOM there. And then, so, actually I think what I forgot to mention is your update selection is just what .data gives back, does that make sense?
[00:01:59] So we do .data, and then for enter and exit you have to access it from doing .exit or .enter. But for you to get the update selection it's just whatever .data returns back, the .data returns you back your update selection.
>> Shirley: Should I set, do you want me to represent-
[00:02:21]
>> Speaker 2: So we've like already been using the update selection, every time we do .data, or?
>> Shirley: Yeah, so, okay so, if for example we do .data and then we do .adder, .adder .adder, then that would be editing the update selection. But most of the time what we've been doing is doing .data, .enter and so that's been getting us the enter selection, but if we haven't done .enter, then we would be working off of the update selection.
[00:02:54] Yeah, so that's the little tiny detail, so this is one of the, I guess, semi-big things that change between version three and version four which is how the update selection is treated. And I personally the version four is treated like the version four might figure it out really well.
[00:03:13] But, remember what .data returns and you can do, you can chain attributes or chain like you know styles, author, and when you chain that author.data, you're working off the update selection. But the reason why I don't particularly emphasize that as much is because usually most of the time you want to be working on the enter + update selections, because you want to be working on off of what's left on the screen once you've removed the extraneous.
[00:03:51] So that's the enter + update selection and how you get that is essentially you just merge them. So .merge is another D3 function that all it does is takes two selections and combines it into one selection, that's it. So what's happening here is we're taking the enter selection, and then we're taking this bars, which is our, this bars is what .data returned us, so this bars is our update selection, it's not.
[00:04:23] Yeah, this bars is our update selection and then it's merging those two into one selection so that we can set attributes on that whole thing, of what is now on our screen.
>> Shirley: Yes.
>> Speaker 3: The question guy has a question, the reason why they're being merged, enter.merge(bars), the reason why they're being merged is because they're both displayed, right?, is that correct?
[00:04:53]
>> Shirley: Yeah.
>> Speaker 3: Okay, now that makes a lot more sense, the exit, we just removed that, we don't render that, obviously?
>> Shirley: Yeah.
>> Speaker 3: But we do need to merge what is displayed which is what is added and what is-
>> Shirley: Remaining, yeah.
>> Speaker 3: Yeah, remaining.
>> Shirley: What is remaining, yeah.
[00:05:09]
>> Speaker 3: Yeah, that makes sense, thank you.
>> Shirley: So, yeah, usually you could set attributes on just update selection, but I find that to be really rare. Usually I find that I want to set certain things on the enter selection and i want to set the things that don't depend on data change.
[00:05:28] And then I want to take everything that's still on the screen the added plus remaining, and set attributes on that. So then this last section is me talking about with the enter + update selection, I want to be chaining attributes that do depend on the data. So because, if things change from one state to the next, these are the, the x and the y and the height, and all of that, are dependent on the data, and that's what might change, and that's what should be rendered.
[00:06:05]
>> Shirley: And I think that might be it, you guys, I think that's all I was going to say about enter, update, exit.
>> Speaker 4: So if you did remove that merge, just because, you just left the enter, you would see a very uneven, like because your x and y would not be, not scaled properly?
[00:06:22]
>> Shirley: Well, not quite, if you leave just the enter and then you do .adder you'll see the only the newly added bars will get updated with the new data and the remaining ones will remain-
>> Speaker 4: Just as they are.
>> Shirley: Where it was in the previous state, yeah, and similarly if you do bars and set all those attributes, but don't do it to the enter, you'll see that actually.
[00:06:50] Like the added ones, nothing will happen to them because you haven't set the x and y in height, and only the remaining ones will get updated, yeah. So I think this is a super common pattern for version four of D3, you exit and then you do something with the enter, and then finally, you do something with the enter + update.
[00:07:14] And you update all of those so the next set of data sets, like you update those attributes according to your next set of data, yeah. Cool, cool, okay let me just make sure, okay, let's, so I gave you this piece of code to play with.
>> Shirley: That's essentially that code I have before and then, I just make sure to exit out of this after a while cuz I use site interval and that crashes that like a tab.
[00:07:51] [LAUGH] After awhile, so just play with it a little bit and then like exit out of it, but I think what I'm going to do is move on to transitions and animations cuz that's kinda fun and they come hand in hand with enter, update, exit. Cuz if you notice right now, this one, it's adding things and it's removing things, but there's no nice animations that's going on between them.
[00:08:13] So let me get through the animations or the transition section, and then we'll do 30 minutes exercise with pretty much all of this.