Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript

What is D3 enter and exit?

Shahpar Khan

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

svg viewer

A little about D3

D3 is an interactive JavaScript library for data visualization that uses Scalar Vector Graphics (SVG) coupled with HTML and CSS to output charts and figures that illustrate the numeric data. To display charts and figures, you need to make use of a data set that can be loaded from a .csv file or be hardcoded as an array. You can add this dataset to your figure by selecting the containers, but what if the number of items in the dataset does not match the number of containers selected? This is where the enter() and exit() method of D3 come in.

The enter() and exit() method allows you to append or remove containers according to the size of your dataset.

  • If the array is longer than the selection, there’s a shortage of elements, and we need to add elements.
  • If the array is shorter than the selection, there’s a surplus of DOM elements, and we need to remove elements.

enter()

Let’s take a look at the code below. You should focus on the highlighted lines (31 - 51). The code above line 31 is used to style the div containers and display the button. After reading the code, press the RUN button and then press the button displayed in the output.

Observe two things:

  1. line (31 - 35): There are three div containers.
  2. line (39): There are five items in the dataset.

Therefore, when we try to add the data in our div containers, it will just add the first three items and omit the rest.

To cater to this problem, add the enter() method – it will return an enter selection that represents elements that need to be added. This method is usually followed by append(), which adds elements to the DOM:

.enter()
.append("div")

Now, after adding the enter() and append() method, observe how all of the dataset’s items are printed:

exit()

Take a look at the code below – you should focus on the highlighted lines (31 - 51). The code above line 31 is used to style the div containers and display the button. After reading the code, press the RUN button, then press the button displayed in the output.

Observe two things:-

  1. line (31 - 35): The number of div containers is still the same at three.
  2. line (39): However, the number of items in the dataset is now one, which is less than the number of div containers.

Therefore, when we try to add data in our div containers, it adds data to the first container but leaves the following two containers empty because there is no item in the dataset to fill them.

To cater to this problem, add the exit() methodreturns an exit selection, which consists of the elements that need to be removed from the DOM. This method is usually followed by remove():

.exit()
.remove()

After adding the exit() and remove() methods, notice how all the extra div containers are removed.

RELATED TAGS

javascript

CONTRIBUTOR

Shahpar Khan
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring