.enter()

Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Jan 5, 2024
Contribute to Docs

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:

Shows all elements from data

All contributors

Looking to contribute?

Learn JavaScript:D3 on Codecademy