Enter, Update, and Exit in D3

Today at Flatiron we began learning D3, or Data-Driven Documents. D3 is a library to visualize data. Some of the examples are pretty awesome.

One key aspect of using D3 is the enter/update/exit life cycle. When you’re binding your data to elements in your DOM, it is enter/update/exit that saves you from having to manually enter a div to hold each piece of data.

If you have an array of five pieces of data, and have five divs in your DOM in which you want your data stored, that’s a case in which you would simply use update. However, let’s say there’s a mismatch? That’s where enter and exit come in.

Enter will return all of the pieces of data that don’t have an element to be associated with. D3 can then append the necessary number of elements to ensure that you ultimately are left with one element for each piece of data. If you have more elements in your DOM than you have pieces of data, exit will do the reverse, and return these extra elements so that you can remove them.

The true power of the enter/update/exit life cycle comes in to play with dynamic data. Through these functions, you can update your visualization as your data changes, and D3 will add and remove elements as needed to ensure that your data has a place in the DOM to live.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>