Join Ray Villalobos for an in-depth discussion in this video Creating subselections with enter(), part of Data Visualization with D3.js.
So I'll go to my Index.HTML document and just get rid of all these divs right here because we're going to be programming them in with D3. So I'm going to save this and then I'm going to switch over to the script file and just add these as information right here in my data. So, right over here I'm going to add a name, a colon, and then in quotes, make sure I add a comma at the end and then the name of each user. So i'm going to copy this one time, and then add the first user and then go through and add the rest.
All right, so now that we've got the data back in it's time to modify our code to use enter. So the enter method changes the way that the data method works. Once you use enter, you're no longer appending things to the current selection. You're placing them into something that D3 calls a sub-selection. So let me show you this with our example. I'm going to scroll down here, and then right after data, we're going to add the enter command. And, because we want to go through each of the pieces of data and then add a div whenever we're entering one of these pieces of data, we're going to use the append command here, and then append a div.
Now since we have a div, then what we probably want to do is make sure that we add a class of item just like we had before. So we'll use the classed command and turn on item. So we'll make that true. That toggles the item class on. And then what we want to do is use the tax method, pass it along a function with the data, and then in here just return the data's name. So let me go ahead and save this, and we should have something that looks kind of correct, but there's something not quite right with this, and let me show you what it is in the DOM.
So if we take a look at this information right here, you'll notice that the section with the iID of chad is right here, and there's something that I need to add right here. Actually, this needs to be changed so that it targets that chart. So, I'm going to save that. And notice that even though I fixed that, it still didn't place the elements in here. That's because when we use the enter method, we've created a sub-selection. So, this enter command appends a bunch of divs into a temporary place holder.
We haven't added this back into the chart yet, and we never do and so, what happens with D3 is that it just puts it at the very end of our html paste. You'll notice that it's right after the body tag, and that's not good we actually need to push it back into our chart. Now the way that you do that is the time travel part. so what you do is, you do a selection right after you target the chart. We're going to do a select all statement, and then target divs that we're going to create.
Now, this is sort of weird because it looks like we're selecting something that doesn't exist yet. So if you were reading this sequentially, you'd be going, D3 go ahead and select the chart element and then find divs inside it. Well, right at this point, you haven't yet created any divs that are inside it. That's what the enter command is doing right here. So in essence, you're actually joining this select all statement with this append, or at least this select all statement is targeting this appending of the divs, and this select all command is actually joining the two together.
So it looks like we're selecting things before they exist, and that's sort of true. Now the reason we want to be able to do this is tied to the way that we chain commands in D3. You usually create graphics in D3 by using a very long chain of commands. You see them all over like place, like right here, we're classing something, we're adding some text, and then we're adding some styles right here, and we could keep on going forever. The problem is that it would be impossible to create some graphics this way if we weren't able to isolate specific groups of things that we want to draw, and that's what this technique is doing.
It lets you create a grouping or a sub-selection and then do something upon it. Now, enter lets you create one of these subgroups. If we needed to exit the current subgroup, you would, of course, use an exit command. So you could probably over here, type in an exit command, but since we're using a super simple graphic here, with only one group, the exit command is not necessary. So, let me undo this, and I haven't saved this yet, so you haven't seen that. Once we save this, all the elements are now placed inside my chart selection, which is right here, and this is kind of what we expect it to do.
Now selecting things before they exist takes a little bit of getting used to, but learning to work with sub-selections is a critical skill when building complex D3 graphics.
- What is D3.js?
- Creating a basic document structure
- Controlling HTML DOM elements
- Binding data to the DOM
- Drawing SVG graphics with D3
- Using ordinal scales
- Adding events and transitions
- Working with data
- Creating and adjusting layouts