D3.js selection.enter() Function
The d3.selection.enter() function in D3.js is used to create the missing elements and return the enter selection.
Syntax:
selection.enter();
Parameters: This function does not accept any parameter.
Return Values: This function returns the enter selection.
Below examples illustrate the D3.js selection.enter() function in JavaScript:
Example1:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" path1tent=" width = device -width, initial-scale = 1 .0"/> < title >D3.js selection.enter() Function</ title > </ head > < style > div { background-color: green; color: #ffffff; width: 50px; margin-bottom: 5px; padding: 20px; height: 10px; } </ style > < body > <!-- Please note that no div tags are added here --> < script src = "https://d3js.org/d3.v4.min.js" > </ script > < script src = "https://d3js.org/d3-selection.v1.min.js" > </ script > < script > var div = d3 .select("body") .selectAll("div") .data(["Beginner", "for", "Beginner"]) .enter() .append("div") .text((d) => { return d; }); </ script > </ body > </ html > |
Output:
Example 2:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" path1tent=" width = device -width, initial-scale = 1 .0"/> < title >D3.js selection.enter() Function</ title > </ head > < style > div { background-color: green; color: #ffffff; width: 50px; margin-bottom: 5px; padding: 20px; height: 10px; } </ style > < body > <!-- Please note that no div tags are added here --> < script src = "https://d3js.org/d3.v4.min.js" > </ script > < script src = "https://d3js.org/d3-selection.v1.min.js" > </ script > < script > var h2 = d3 .select("body") .selectAll("h2") .data(["I am from heading level 2"]) .enter() .append("h2") .text((d) => { return d; }); var span = d3 .select("body") .selectAll("span") .data("I am from span") .enter() .append("span") .text((d) => { return d; }); var p = d3 .select("body") .selectAll("p") .data(["paragraph", "paragraph"]) .enter() .append("p") .text((d) => { return d; }); </ script > </ body > </ html > |
Output: