D3.js selection.exit() Function - GeeksforGeeks

13 Aug, 2020
The d3.selection.exit() function in D3.js is used to remove the elements or tags which correspond to the old data or in simple words This is used to update the DIV elements that were created before with the new data given.
Syntax:
selection.exit();

Parameters: This function does not accept any parameter.
Return Values: This function returns the exit selection.
Below examples illustrate the D3.js selection.exit() 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.exit() Function</title>    </head>    <style>        div {            background-color: green;            color: #ffffff;            width: 100px;            margin-bottom: 5px;            padding: 18px;            box-sizing: border-box;            height: 60px;        }    </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>                        // This will create DIVs having data as given            var div = d3                .select("body")                .selectAll("div")                .data(["geeks", "for", "geeks"])                // Old dataset                .enter()                .append("div")                .text(function (d) {                    return d;                });              div = div.data(["DIVS UPDATED", "GEEKS",                             "FOR", "GEEKS"], function (d) {                return d;            }); //Updated new data set.            div.enter()                .append("div")                .text(function (d) {                    return d;                });            div.exit().remove();        </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.exit() 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;                });              // Updated heading            h2 = h2.data(["Heading Updated"], function (d) {                return d;            });            //Updated new data set.            h2.enter()                .append("h2")                .text(function (d) {                    return d;                });            h2.exit().remove();              var span = d3                .select("body")                .selectAll("span")                .data("I am from span")                .enter()                .append("span")                .text((d) => {                    return d;                });              // Updated span            span = span.data(["SPAN UPDATED ", "GEEKS",                               "FOR", "GEEKS"], function (d) {                return d;            }); //Updated new data set.            span.enter()                .append("span")                .text(function (d) {                    return d;                });            span.exit().remove();        </script>    </body></html>
Output:
Before using exit() function:
After using exit() function:
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
How to get character array from string in JavaScript?
How to get selected value in dropdown list using JavaScript ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?