D3 Basic General Update Pattern
FREE     Duration: 25:07
Part of Course: Intermediate D3 Course
 

Takeaways:

  • The D3 Data Join Pattern is a way to bind data to DOM Elements
  • The D3 Data Operator produces three virtual selections - Enter, Update, and Exit
  • The Enter selection contains placeholder elements for any data that did not get bound to DOM elements
  • The Update selection contains all of the existing DOM elements that had their __data__ attributes updated
  • The Exit selection contains all of the existing DOM elements which did not have their __data__ attributes updated
  • When a D3 Data Join is done, there are only three possible scenarios: More Data Than DOM elements, Less Data Than DOM elements, or the same number of Data and DOM elements
  • The D3 General Update Pattern describes the process of using the enter, update, and exit selections in a certain way that makes it possible to cover all possible Data / DOM element scenarios regardless of what less than, greater than, or equal to

Transcript:

D3 Basic General Update Pattern

D3 Data Joins Revisited


This is the much repeated D3 pattern:

var circles = svg.selectAll("circle")
    .data(data)
  .enter().append("circle");

When creating a new data visualization on the webpage, this is how we bind our data to SVG elements to create them and place them on the screen.

The selectAll("circle") creates an empty selection as there are no DOM elements with the selector of circle.

The data method binds the data to elements.

Each element in the data array gets bound to a new DOM element.


The data method produces three virtual selections

var circles = svg.selectAll("circle")
    .data(data)
  .enter().append("circle");

// update => circles;
// enter  => circles.enter();
// exit   => circles.exit();

The enter selection - which contains placeholder elements for any new elements.

The update selection - which contains existing elements that have had their __data__ attributes updated.

and the exit selection - which are the remaining elements that have not had their __data__ attributes updated.


Since the initial selectAll("circle") selection created an empty selection, the update and exit virtual selections will be empty.

var circles = svg.selectAll("circle")
    .data(data)
  .enter().append("circle");

The enter selection contains all of the placeholder elements.

The missing elements are then added to the SVG container by the append("circle") command.


This Venn Diagram illustrates the idea of the Data Join.

[ Image: Image of Venn Diagram of D3 Data Join ]

On the left, in purple, we have the data that belongs to the DOM elements.

On the right, in blue, we have the data that belongs to the data set being bounded.

In the middle, we have the data that belongs to both sets, that we have updated.

If we want the data slash DOM elements for which no new data was added, then we choose the exit selection.

If we want the data slash DOM elements for which data was updated, then we choose the update selection.

If we want the data slash DOM elements for which new data was bound to new elements, then we choose the enter selection.

So far so good, relatively straight forward and it's something we've been doing since the beginning.

Next up, let's talk about the Exit Selection as it's not something we've covered before.



Exit Selection


This is how we access the exit selection.

[ Image: Image of Venn Diagram of D3 Data Join ]

d3.selection.data(...).exit()

This selection is only defined on the selection returned by the data operator.

The Exit selection is the selection of existing DOM elements in the current selection for which no new data element was found.

So if there were five DOM elements in the selection and we only provided 4 data points, the exit selection would contain the fifth DOM element.


What often occurs is that we will want to get rid of the elements for which there was no data.

d3.selection.data(...).exit().remove()

This is done through the remove operator.

This will delete the DOM elements from the web page.


Let's take a look some JavaScript Examples to see how the exit

[ Image: Image of Venn Diagram of D3 Data Join ]

d3.selection.data(...).exit()


This web page has the D3 library imported from the d3js.org website.


We have opened the Chrome Developer Tools and are in the Console Section.


Let's add 5 HTML paragraph elements to the body of this web page.

d3.select("body").append("p").attr("id", "p_1");

d3.select("body").append("p").attr("id", "p_2");

d3.select("body").append("p").attr("id", "p_3");

d3.select("body").append("p").attr("id", "p_4");

d3.select("body").append("p").attr("id", "p_5");

BROWSER Click on the body element to show paragraphs.

We use the D3 append functionality and give each paragraph element it's own unique id.


Next, let's bind an array of four numbers to the selection of the four paragraph elements.

var dataSelection = d3.select("body").selectAll("p").data([1, 2, 3, 4]);

This will go through DOM elements and bind the data to them.

The first data element will be bound to the first paragraph element in the selection.

The second data element will be bound to the second paragraph element in the selection.

The third data element will be bound to the third paragraph element in the selection.

The fourth data element will be bound to the fourth paragraph element in the selection.

There is no fifth data element, so the fifth paragraph element does not get any data bound to it.


It is this fifth paragraph element that gets assigned to the d3 exit selection.

dataSelection.exit();

BROWSER click into the array

If we go into the array, you can see that it is an array of five elements.

Though the only element that shows up is the paragraph with the html id of P underscore 5.


If we take a look at the interior array, we can see that the order of the selection was preserved.

dataSelection.exit()[0];

This tells us that the first four elements of the array are undefined and that the last element of the array is the paragraph element with an id of p underscore 5.


Let's take a look at the data attribute of each of the 5 paragraphs:


We look at the first paragraph element.

d3.selectAll("#p_1").data();

This returns the number 1 - which is what we expect as the first data element was bound to the first paragraph element.


We look at the second paragraph element.

d3.selectAll("#p_2").data();

This returns the number 2 - which is what we expect as the second data element was bound to the second paragraph element.


We look at the third paragraph element.

d3.selectAll("#p_3").data();

This returns the number 3 - which is what we expect as the third data element was bound to the third paragraph element.


We look at the fourth paragraph element.

d3.selectAll("#p_4").data();

This returns the number 4 - which is what we expect as the fourth data element was bound to the fourth paragraph element.


Finally, we look at the fifth paragraph element.

d3.selectAll("#p_5").data();

This returns JavaScript Data Type of undefined - which is what we expect as there was no fifth data element to be bound to the fifth paragraph element.


Let's now explore how to use the remove operator on an exit selection.

dataSelection.exit().remove();

BROWSER: in Elements section, click on id="p_4"

As soon as we press enter D3 deletes slash removes all of the elements in the exit selection.


Let's do this again with the 5 paragraphs and only 1 data element.


We reset the browser


We add the 5 paragraphs

d3.select("body").append("p").attr("id", "p_1");

d3.select("body").append("p").attr("id", "p_2");

d3.select("body").append("p").attr("id", "p_3");

d3.select("body").append("p").attr("id", "p_4");

d3.select("body").append("p").attr("id", "p_5");

BROWSER: click into the body tag


Next, let's bind an array of 1 number to the selection of all the paragraph elements.

var dataSelection = d3.select("body").selectAll("p").data([1]);

This will go through all of the DOM elements and bind the data to them.

The first data element will be bound to the first paragraph element in the selection.

There is no second, third, fourth or fifth data element, so the second, third, fourth and fifth paragraph elements do not get any data bound to them.


It is these second, third, fourth and fifth paragraph elements that get assigned to the d3 exit selection.

dataSelection.exit();

BROWSER click into the array

If we go into the array you can see that it is an array of five elements.

Though the only element that does not show up is the paragraph with the html id of P underscore 1.

All of the other paragraph elements show up.


If we take a look at the interior array, we can see that the order of the selection was preserved.

dataSelection.exit()[0];

This tells us that the first element of the array is undefined and that the 2nd, 3rd, 4th and 5th elements of the array are the paragraph elements with an id of p underscore 2, p underscore 3, p underscore 4 and p underscore 5.


Let's take a look at the data attribute of each of the 5 paragraphs:


We look at the first paragraph element.

d3.selectAll("#p_1").data();

This returns the number 1 - which is what we expect as the first data element was bound to the first paragraph element.


Next, we look at the second paragraph element.

d3.selectAll("#p_2").data();

This returns JavaScript Data Type of undefined - which is what we expect as there was no second data element to be bound to the second paragraph element.


This is what will happen to all of the other paragraphs in the exit selection.


Let's now explore again how to use the the remove operator on an exit selection.

dataSelection.exit().remove();

BROWSER: in Elements section, click on id="p_1"

As soon as we press enter, D3 deletes slash removes all of the elements in the exit selection.

Which means that D3 removed all of the paragraphs other than the paragraph with id of p underscore 1


Very good - the exit selection allows us to select the DOM elements for which no new data was added when we did the bounding of the data.



Enter Selection


This is how we access the enter selection:

[ Image: Image of Venn Diagram of D3 Data Join ]

d3.selection.data(...).enter()

This selection is only defined on the selection returned by the data operator.

The Enter selection is the selection of placeholder elements in the current selection for any new elements.

This is the common D3 pattern we have seen before.

So if there are zero DOM elements and we bind 4 data points using the selectAll, data, enter selection, the enter selection will contain 4 placeholder elements.


The top piece of code is the D3 pattern we have seen before:

d3.select("body").selectAll("p")
    .data([1, 2, 3, 4])
  .enter().append("p")
    .attr("id", function(d) { return "p_"+d; });

var dataSelection = d3.select("body")
    .selectAll("p")
    .data([1, 2, 3, 4, 5]);

dataSelection.enter();

The bottom piece of code selectAlls the paragraph elements and binds 5 pieces of data to them.

Since the top piece of code generated 4 paragraph elements, we will have 1 more piece of data than we have paragraph elements.

When we select the enter selection, we get the place holder element for the data element number 5.


When you use the chain syntax after selecting the enter selection to append an element, it will create the new elements as needed.

dataSelection.enter().append("p")
    .attr("id", function(d) { return "p_"+d; });

This means that the placeholder elements get merged with the paragraph DOM element in this case.

We'll take a look at this in the JavaScript console.


Let's take a look some JavaScript Examples to see how the enter selection works.


This web page has the D3 library imported from the d3js.org website.


We have opened the Chrome Developer Tools and are in the Console Section.


Let's add 4 HTML paragraph elements to the body of this web page using the D3 pattern.

d3.select("body").selectAll("p")
    .data([1, 2, 3, 4])
  .enter().append("p")
    .attr("id", function(d) { return "p_"+d; });

BROWSER Lick on the body element to show paragraphs.

This should be very familiar and straight forward to you now.

We selectAll non-existent paragraph elements.

Then we bind data to them which creates placeholder elements as there are no elements in the selectAll selection.

The enter selection creates a selection of these placeholder elements.

We append a paragraph element for each placeholder element in the enter selection.


Next, let's bind an array of 5 numbers to the selection of all the paragraph elements.

var dataSelection = d3.select("body").selectAll("p").data([1, 2, 3, 4, 5]);

dataSelection;

The first thing we see is that the dataSelection now has 5 elements as opposed to the 4 it had before.

This makes sense as we just bound 5 data elements to the selection of all the paragraph elements in the document.


Let's open up the array to see what is inside.

BROWSER click on the array.

When we look at the array we can see 4 elements.

These four elements are the elements that were already in existence.

These four elements encompass the update selection which we will cover in the next section.

For now, let's focus on the fact that one element is not represented.

This element is the element that lives in the enter selection.


If we select the dataSelection enter selection, we will find this element.

dataSelection.enter();

BROWSER click into object

When we click into the object we can see that it has a data attribute.

This data attribute has the number 5 element from the data array.

You can see that it doesn't have any other defining features or attributes, it's as pure an Object as you can get.


If we get the array inside of the selection array, we can see that the enter selection is an array of 4 undefined objects and 1 defined object.

dataSelection.enter()[0];

BROWSER: click into object

D3 does this in order to preserve order in selections.

In the next video we will cover how to get around this with key functions.


Let's redefine the dataSelection variable, this time with an array of 9 numbers.

var dataSelection = d3.select("body").selectAll("p").data([1, 2, 3, 4, 5, 6, 7, 8, 9]);

dataSelection;

We selectAll the paragraph elements in the document, which is still 4 and bind 9 pieces of data to them.

Each data is one of the numbers in the array.


If we open up the array to see what's inside, we find the four paragraph elements that already existed.

BROWSER click on the array.

This is just like before.


When we select the dataSelection enter selection, we find the 5 missing elements.

dataSelection.enter();

BROWSER click into the array

We find the missing objects, note that their index number starts at 4 and goes through 8.

This is expected as the selections are 0 index based, so these are the last 5 place holder elements.


If we get the array inside of the selection array, we can see that the enter selection is an array of 4 undefined objects and 5 defined objects.

dataSelection.enter()[0];

Again - D3 does this to preserve order in selections.


Now, let's append a paragraph element for each data placeholder object in the enter selection.

dataSelection.enter().append("p")
    .attr("id", function(d) { return "enter_p_"+d; });

BROWSER: click on paragraph elements added.

You can see how we can use the append to create the paragraph elements that were missing.


From these examples we have seen that the enter selection is the selection of placeholder elements in the current selection for any new elements.



Update Selection


This is how we access the update selection.

[ Image: Image of Venn Diagram of D3 Data Join ]

d3.selection.data(...)

Note that the data operator returns the update selection.

So instead of having to select the virtual selection like we did with enter and exit, we don't have to do anything.

The update selection is the selection which contains existing elements that have had their __data__ attribute updated.

So if there are 4 existing DOM elements with data attributes and we bind 4 data points to these existing elements, the update selection will contain these 4 DOM elements.


The top piece of code is the D3 pattern we have seen before:

d3.select("body").selectAll("p")
    .data([1, 2, 3, 4])
  .enter().append("p")
    .attr("id", function(d) { return "p_"+d; });

var dataSelection = d3.select("body").selectAll("p").data([5, 6, 7, 8]);

dataSelection;

The bottom piece of code selectAlls the paragraph elements and binds 4 pieces of data to them.

Since the top piece of code generated 4 paragraph elements and we bound 4 pieces of data to those 4 paragraph elements, there won't be any extra DOM elements or extra pieces of Data.

If we then select the update selection, we get the 4 elements which have had their data attribute updated.


The other important place the update selection shows up in D3, is when we run the code on the screen.

d3.select("body").selectAll("p")
    .data([1, 2, 3, 4])
  .enter().append("p")
    .attr("id", function(d) { return "p_"+d; });

var dataSelection = d3.select("body").selectAll("p").data([1, 2, 3, 4, 5, 6, 7, 8, 9]);

dataSelection.enter().append("p").attr("id", function(d) { return "enter_p_"+d; });

dataSelection;

We do the D3 pattern.

Then we bind more data points than we have elements for.

The update selection will contain the first four paragraphs.

The enter selection will contain the last five paragraphs.

Then, we use the append() operator on the enter selection.

As soon as the append operator is run on the enter selection, the update selection expands to include the entering elements.

So in this case, the update selection will now contain all 9 paragraph elements.

We'll see this example in the JavaScript console shortly.


Let's take a look some JavaScript Examples to see how the update selection works.


This web page has the D3 library imported from the d3js.org website.


We have opened the Chrome Developer Tools and are in the Console Section.


Let's add 4 HTML paragraph elements to the body of this web page using the D3 pattern.

d3.select("body").selectAll("p")
    .data([1, 2, 3, 4])
  .enter().append("p")
    .attr("id", function(d) { return "p_" + d; });

BROWSER Lick on the body element to show paragraphs.

This should be very familiar and straight forward to you now.

We selectAll non-existent paragraph elements.

Then we bind data to them which creates placeholder elements as there are no elements in the selectAll selection.

The enter selection creates a selection of these placeholder elements.

We append a paragraph element for each placeholder element in the enter selection.


We can checkout what data is bound to each of the four paragraph elements.

d3.selectAll("p").data();

We can see the array of data we passed into the data operator earlier.


Next, let's bind an array of 4 numbers to the selection of all the paragraph elements.

var dataSelection = d3.select("body").selectAll("p").data([5, 6, 7, 8]);

dataSelection;

The first thing we see is that the dataSelection has 4 elements.

This makes sense as there were 4 data elements being bound to the 4 already existing DOM elements.


Let's open up the array to see what is inside.

BROWSER click on the array.

When we look at the array we can see 4 elements.

These four elements are the elements that were already in existence.

These four elements encompass the update selection.

Note that there are no missing elements as we bound 4 data points to 4 pre-existing DOM elements.


If we look at the dataSelection enter selection, we find no new elements.

dataSelection.enter()[0];

Note, that there is still an order, it's just that all the elements in the selection are the undefined data type.


If we look at the dataSelection exit selection, we find no elements that did not receive data.

dataSelection.exit()[0];

Note, that there is still an order, it's just that all the elements in the selection are the undefined data type.

So because we have the exact number of data elements as DOM elements in the selection, the binding happened 1 for 1 and we are just left with the update selection.


Let's look at the data that is now attached to the paragraph elements.

dataSelection.data();

d3.selectAll("p").data();

You can see that in either command, we are looking at the 4 existing paragraph elements in the Document.

Both commands return the array of updated data.

This tells us that the data was bound correctly and each paragraph element __data__ attribute was updated.


Let's reset the browser and explore how using the append operator on the enter selection causes the update selection to include the entering elements.

BROWSER reset the browser


First we do the D3 pattern.

d3.select("body").selectAll("p")
    .data([1, 2, 3, 4])
  .enter().append("p")
    .attr("id", function(d) { return "p_" + d; });


Then we bind the new data.

var dataSelection = d3.select("body").selectAll("p").data([1, 2, 3, 4, 5, 6, 7, 8, 9]);

This will cause place holder elements to be created.


Let's look at the update selection first.

dataSelection;

BROWSER click into the array of array.

You can see that the update selection contains the first four paragraphs which were the ones that had their data attributes updated.


Let's look at the enter selection next.

dataSelection.enter();

BROWSER click into the array of array

You can see that the enter selection contains five DOM elements which are the placeholder objects created.


Now, let's use the chain syntax to call the append() operator on the enter selection.

dataSelection.enter().append("p").attr("id", function(d) { return "enter_p_" + d; });

BROWSER: show all Ps in elements section.

This creates paragraph elements for the 5 place holder elements at the end.


Now, let's look at the update selection.

dataSelection;

BROWSER click into the array of array.

When we look at the update selection, you can see that once an append operator is used on an enter selection, that the update selection expands to include the newly created elements.

Which means that when we do operations on the update selection, that they will be done on both the enter and update selections.


From these examples we have seen that the update selection is the selection which contains existing elements that have had their __data__ attributes updated.



Basic General Update Pattern


Mike Bostock created a great example of the General Update Pattern in D3.js.

[ Image: Mike Bostock's D3 General Update Pattern ]

It covers the enter, update and exit selections.

This Block does not use key functions for the data-join, so the elements are always added to the end.

We are going to use some of the structure of his example, to construct a manual example in the JavaScript Console.


We are going to be using three variables:

var cupcake  = "cupcake".split("");

var flamingo = "flamingo".split("");

var icecream = "icecream".split("");

Each variable will be the array of individual letters that make up the string.

For example, the variable cupcake will be an array of the letters C, U, P, C, A, K, E

There are two different string lengths.

The flamingo and icecream variables will have the same length.

Using these three variables we will construct and add a set of text elements to an SVG container.

One letter per one text element.


For each selection example, we will update the class of the SVG Text Element to really understand how the enter, exit and update selections work when we are updating data.

[cupcake, flamingo, icecream]
// class = XXXXX_enter
// class = XXXXX_exit
// class = XXXXX_update


Let's take a look the JavaScript Console for the Examples


This web page has the D3 library imported from the d3js.org website.


We have opened the Chrome Developer Tools and are in the Console Section.


We start with the definition of the SVG container the text will live in.

var svg = d3.select("body").append("svg")
    .attr("height", "300")
    .attr("width", "600")
  .append("g")
    .attr("transform", "translate(12, 150)");


Then we create the D3 pattern.

var textSelection = svg.selectAll("text")
    .data("datadrivendocuments".split(""));


We check the exit selection.

textSelection.exit()[0];

Nothing here as there are no elements yet, so there weren't any elements that didn't receive data.


We check the update selection.

textSelection[0];

Nothing here as there are no elements yet, so no elements got their __data__ attribute updated.


We check the enter selection.

textSelection.enter()[0];

BROWSER click into the array and the first object.

Here we can see the 19 placeholder objects.

We can see the letter "D" attached to the __data__ attribute of the first object.


We now create the new elements using the enter selection and the append operator.

textSelection.enter().append("text")
    .attr("class", "initial")
    .attr("x",  function(d, i) { return i * 24; })
    .attr("dy", ".35em");


Next, we add the actual text, thus completing the full cycle of the D3 pattern.

textSelection.text(function(d) { return d; });

You can now see the full text data on the screen.


And just to drill this point home, let's look at the update selection.

textSelection;

BROWSER: expand array

When the append operator is run on the enter selection, the update selection expands to include the enter selection.


Alright - so far so good, we explored a bit more deeply than before, the D3 pattern.


Next, lets create the array variables from the three different strings.

var cupcake  = "cupcake".split("");

cupcake;

var flamingo = "flamingo".split("");

flamingo;

var icecream = "icecream".split("");

icecream;


Let's now bind the cupcake data to the text elements.

var text = svg.selectAll("text").data(cupcake);

The string cupcake has 7 letters, so we are selecting many more elements than there are data points.


Let's update the class of the elements in the D3 update selection.

text.attr("class", "cupcake_update");

BROWSER go to elements and scroll up so you can see the elements that were updated.

You can see that the first seven elements receive a new class.

The rest of the elements did not get their class updated.

Also notice that the actual text has not changed, this is because we haven't re-written it.


Let's check the exit selection to see if there is anything there.

text.exit();

BROWSER: click into array

We can see all of the other elements which did not receive an updated data point.


Let's update the class of the elements in the D3 exit selection.

text.exit().attr("class", "cupcake_exit");

BROWSER: click into elements and on the first class="cupcake_exit"

You can see that the rest of the elements now have the cupcake underscore exit class.


Let's check the enter selection to see if there is anything there.

text.enter()[0];

We see no elements in this selection.

This is as we expected - no new placeholder elements were created, so no enter selection elements should exist.


Let's update the actual text of the SVG elements.

text.text(function(d) { return d; });

BROWSER: highlight cupcake

Now you can see in the webpage, that we have updated the actual letter of each SVG text element.


Lastly, let's remove the exit selection elements

text.exit().remove();

When we remove the exit selection, we are now left with just the cupcake SVG text elements.


Next, let's bind the data from the flamingo string.

var text = svg.selectAll("text").data(flamingo);

Flamingo has 8 letters, so we are selecting 7 DOM elements and binding 8 data elements.

This means that D3 is going to have to create a placeholder element for the last element.


Let's update the class of the elements in the D3 update selection.

text.attr("class", "flamingo_update");

BROWSER: Elements section

Notice that all of the elements had their class changed.

This is because there are more data points than elements, so every single paragraph element that exists had it's data


Let's check the exit selection to see if there is anything there.

text.exit()[0];

We see no elements in this selection.

This is as we expected - as there were more data points than DOM elements, there were no DOM elements that did not get their data updated.

So no exit selection elements to view and/or remove.


Let's check the enter selection to see if there is anything there.

text.enter()[0];

BROWSER click into last element.

We see the placeholder element containing the last letter of the string flamingo - which is an "o".

This makes sense as D3 is keeping order for us, so we see 7 undefined data types, and then the placeholder object.


Next, let's add this placeholder object to the web page

text.enter().append("text")
    .attr("class", "flamingo_enter")
    .attr("x", function(d, i) { return i * 24; })
    .attr("dy", ".35em");

BROWSER: look at elements

You can see that the last SVG text element now has a class of "flamingo" underscore enter.

This is the element that we just added.


Next, let's set the text of each SVG text element based on the data that is bound to it.

text.text(function(d) { return d; });

You can see that the word flamingo is now spelled out.

Remember, after we use the append operator on the enter selection, the update selection expands to include the enter selection.

This is how we can use the text operator on the update selection to update the letter of each SVG text element.


There are no elements in the exit selection to remove, so let's once again update the data.


This time, we update the data with a string of the same length which should mean no exit and no enter selections, just the update selection.

var text = svg.selectAll("text").data(icecream);


Let's update the class of the elements in the D3 update selection.

text.attr("class", "icecream_update");

BROWSER: ELements section

Notice that all of the elements had their class changed.

This is because there are an equal amount of data points as there are DOM elements.

So each DOM element had it's __data__ attribute updated and is included in the update selection.


Let's check the enter selection to see if there is any thing there.

text.enter()[0];

We see no elements in this selection.

This is because there was the same number of data elements as DOM elements, so no placeholder elements needed to be created.

Because there were no placeholder elements in the enter selection, we do not need to do the D3 pattern to create the new DOM elements.


Let's check the exit selection to see if there is anything there.

text.exit()[0];

We see no elements in this selection.

This is because there was the same number of data elements as DOM elements, so no DOM elements were left over.


Next, let's set the text of each SVG text element based on the data that is bound to it.

text.text(function(d) { return d; });

You can see that the word ice cream is now spelled out.


Lastly, let's change the data back to the cupcake dataset.

var text = svg.selectAll("text").data(cupcake);


We check the enter selection:

text.enter()[0];

The string cupcake has one less letter than icecream, so we don't see any new placeholder elements created.


We check the exit selection:

text.exit()[0];

BROWSER: click into array and into object

Since the string cupcake has one less letter than icecream, we expect the last letter to be included in the exit selection.


We change the class of the exit selection elements.

text.exit().attr("class", "cupcake_exit");

BROWSER: click on cupcake_exit element.

You can see that the class changed.


We check on the update selection elements and update their class attribute.

text[0];

text.attr("class", "cupcake_update");


Then we remove the exit elements.

text.exit().remove();

BROWSER click on last text element in element section.


And lastly, we update the actual text of the text elements.

text.text(function(d){ return d; });


And with that we have covered how the exit, update and enter selections work at a deeper level in D3 through the use of the JavaScript Console, SVG Text elements and their class attributes.


Through the understanding generated, we have started exploring the general update pattern that we can use in D3 as we have data that is being updated.

<< Back To D3 Screencast and Written Tutorials Index