Master D3.js for Data Visualization/

...

/

Enter, Update, and Exit

Enter, Update, and Exit

The ‘join()’ method's behavior can be overridden by passing in a couple of functions.

We'll cover the following...

The join() method does a lot for us already. However, there may be times where we will need to customize the default behavior. For example, we can play an animation when an element is entering or exiting the page.

Press + to interact
const el = d3.select('ul')
  .selectAll('li')
  .data(data)
  .join('li')
  .text(d => d)

In our script, we are passing in a string to the join() method. The join() method will append new elements if there is data in the enter selection. The element it appends will be based on the string we pass in. This is one way of using this method.

We can customize the behavior of the join() method by passing in three functions. It is optional to pass in three functions. Each function will be called for different scenarios. The first function is called when D3 is working with the enter selection. The second function is called when the current selection needs to be updated. The last function is called when D3 is working with the exit selection.

Let’s look at each one closely.

The enter selection

In the example above, instead of passing in a string, we are passing in a function. This function will be called for the enter selection. The function will be provided the enter selection, which we are referring to as enter.


Inside this function, we ...