- Adding Elements
- Removing Elements
- Identity and the Key Function
D3 selections are a different way to look at data binding. They’re powerful because the same selection can be updated for different data later on. Updating is the most powerful part of selections.
Ok, so we’ve referenced
d3.selectAll() a few times already
but now, it’s really time to dig in.
d3.select() will find one element,
d3.selectAll will match all available elements.
With types, the functions might look something like:
d3.select(String selector) -> (d3.selection)
D3 selections are a group of elements that match a query or could match a query later (the elements may not have been constructed yet).
Selections are used to map pieces of our data to elements in the DOM. Suppose we have some data:
And we want to map these to points on a scatterplot. We know we want each object
in this array to turn into a
<rect> tag, inside of our
To connect these, we’re going to create a selection and use
.data() to bind
our data to the selection.
Okay, now we have a selection but still no elements! We have more work to do.
Again, our goal is to have a rectangle for each data point. We are starting with
none and we have 4 new data points, so obviously the right thing to do is to
add a new
<rect> for each data point.
The way D3 looks at this is a more subtle: we want to add a
per data point, but only for the new points since the last data join. Since this
is the first data binding (there are no rects currently), everything is new,
it’s straightforward to add new points. It’s important to keep in mind that for
the next selection, things will be more complex since there will already be
The part of a D3 selection that represents these element-less data-points
newRects represents these element-less data-points, so we use
append to add new elements. The elements don’t add themselves, we have to
create the elements that will match the selection ourselves. We use the same
attribute editing helpers to configure each circle per its data point.
The d3.scaleOrdinal() helps us create buckets for each element. In this case, that's one per product.
The domain is the 3 product names. The range is a little different, rangeRoundBands is a helper function that sets the range, but tells D3 to pick buckets that are whole pixel widths (no fractions).
So how does it turn out? Let’s take a look:
selection.enter() selects elements that have added since the last data
selection.exit() is the opposite, it applies to elements that have been
Suppose we drop the first point from our source array, we can find and operate
on the corresponding element in the DOM via
We can use the
remove() method to immediately delete matched elements, it’s
the opposite of
Identity and the Key Function
But the example with
selection.exit() above works! It only removed one element
from the DOM because we only removed one element from the array, and all the
rest of the objects were the exact same.
What if we get a new page of data, with some overlap, but we no longer have the exact same object instances? Well, we will have to find some way to match objects to each other, and with D3, that’s where a key function comes in.
When we introduced
selection.data() earlier, we left out the hidden second
parameter, the key function. It’s another
(d, i) callback.
This example keys objects on their date, so we can match elements across separate arrays.
The key function is also important in case parts of our objects change – if we change a count, then we can update the appropriate element without having to delete and re-add the element, we can update it in place.
One of D3’s most visually pleasing features is its ability to help with transitions. The key function is critical here for object permanence.
Suppose we have per-product sales we want to update as more products are sold? We can use transitions to demonstrate this update.
Ok, but now time to make it pretty. That’s where
comes in. In the above example, we were just using the plain update
selection to change the values. Here, we’ll use
transition() to make our transition much slicker.
transition() selections can have custom timing attributes like
.delay() and even a custom easing function
.ease(), but the defaults
are pretty nice.
Ok! That was the basics of D3! We’ve got a few more complex examples, but they mostly build on what we’ve already shown.