La función selection.order() se usa para insertar la selección nuevamente de modo que el orden de cada grupo coincida con el orden de selección.
Sintaxis:
selection.order();
Parámetros: Esta función no acepta ningún parámetro.
Valores devueltos: esta función no devuelve nada.
Ejemplo 1: Usar el método selection.clone() sin usar el método selection.order().
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" path1tent="width=device-width,
initial-scale=1.0">
<script src="https://d3js.org/d3.v4.min.js">
</script>
<style>
div {
width: 300px;
color: #ffffff;
height: auto;
background-color: green;
margin: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>D3.js selection.order() Function</p>
<div><span>1. some text.</span></div>
<div><span>2. some text.</span></div>
<div><span>3. some text.</span></div>
<button class="btn">click Here!</button>
<script>
function func1() {
// Selecting div and Cloning the
// divs
// Inserting them just after the
// element But no arranging in
// original order.
var div = d3.selectAll("div")
.clone(true)
}
btn = document.querySelector(".btn");
btn.addEventListener("click", func1);
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón: Tenga en cuenta que los elementos no se insertan en el mismo orden que antes, es decir, 1 se inserta justo después de 1 y 2 se inserta justo después de 2 y así sucesivamente.
Ejemplo 2: Uso de selection.clone() con el método selection.order().
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" path1tent="width=device-width,
initial-scale=1.0">
<script src="https://d3js.org/d3.v4.min.js">
</script>
<style>
div {
width: 300px;
color: #ffffff;
height: auto;
background-color: green;
margin: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>D3.js d3.selection.order() Function</p>
<div><span>1. some text.</span></div>
<div><span>2. some text.</span></div>
<div><span>3. some text.</span></div>
<button class="btn">click Here!</button>
<script>
function func1() {
// Selecting div and
// Cloning the divs
// But also arranging in original order.
var div = d3.selectAll("div")
.clone(true)
.order();
}
btn = document.querySelector(".btn");
btn.addEventListener("click", func1);
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón: tenga en cuenta que los elementos están exactamente en el mismo orden que antes, es decir, 1, 2, 3 y 1, 2, 3.
