La función d3.selection.exit() en D3.js se usa para eliminar los elementos o etiquetas que corresponden a los datos antiguos o, en palabras simples, se usa para actualizar los elementos DIV que se crearon antes con los nuevos datos proporcionados.
Sintaxis:
selection.exit();
Parámetros: Esta función no acepta ningún parámetro.
Valores devueltos: esta función devuelve la selección de salida.
Los siguientes ejemplos ilustran la función D3.js selection.exit() en JavaScript:
Ejemplo 1:
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>
Producción:
Ejemplo 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>
Producción:
Antes de usar la función exit():
Después de usar la función exit():
