Skip to content
Related Articles

Related Articles

D3.js selection.enter() Function

Improve Article
Save Article
  • Last Updated : 17 Aug, 2020
Improve Article
Save Article

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=
        </script>
        <script src=
        </script>
        <script>
            var div = d3
                .select("body")
                .selectAll("div")
                .data(["geeks", "for", "geeks"])
                .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=
        </script>
        <script src=
        </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:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!