Enter Data /Update Data to Elements/Exit Elements with No Data- A D3 Production

This week I’m taking D3 lessons. D3 is for Data-Driven Document, a JavaScript framework that lives for data visualization.

The concept of enter/update/exit at first was a little difficult to understand in the context of d3 code. In this post I am going to try to explain to you (reader) but mostly to confused me what they mean.

The basis of d3 is that you want to show data in the DOM, so in order to do so you need to select an element and bind data to it. It would be very tedious to add the data to each element individually so d3 uses enter/update/exit to control this for you.

Let’s see how this works:

Enter- it will pass on all pieces of data at hand that have NO corresponding elements in the DOM. Think of it as the chocolate factory that distributes these delicious treats to the stores where the chocolate can then be sold.

Update- This will match each piece of data to elements in the DOM. It is the “store” in our analogy. It sees which customers(elements) that don’t possess chocolate and assigns each a piece.

Exit- It works on elements that have no data. This is when there are more elements than pieces of data to bind them to. Exit will remove them. These are the surplus of customers that want to get chocolate but because of the limited supply there nothing left for them. The store tells them to ‘exit’ thru the door.

This pretty much sums up the basics of data/update/exit in D3. All this chocolate talk made me crave these packaged pieces of happiness. If you happen to have some with you now, eat them for me.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s