.enter()

The .enter() selection method refers to a subset of the selection that represents placeholders for elements to be added to the document. This selection is commonly used in conjunction with .data() binding method when there are more data elements than corresponding DOM elements.

Syntax

d3.selection.enter()

• selection: It contains placeholders for new elements that need to be added to the DOM to match the available data.

Note: The .enter() method doesn’t take any arguments.

Example

The following example illustrates the use of the .enter() method. Here, it returns an enter selection as the number of data elements is more than the div elements selected:

const data = ['🎄', '🎅', '❄️', '❤️', '🎁'];
const divSelection = d3.select('body').selectAll('div').data(data);
const enterSelection = divSelection
  .enter()
  .append('div')
  .text((d) => d);

Following is the output of the above code: