The selection.order() function is used to insert the selection again such that the order of each group matches the selection order.
Syntax:
selection.order();
Parameters: This function does not accept any parameters.
Return Values: This function does not return anything.
Example 1: Using selection.clone() method without using selection.order() method.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" path1tent="width=device-width,
initial-scale=1.0">
</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>
|
Output:
- Before clicking the button:
- After clicking the button: Please note that elements are not inserted in the same order as they were before i.e 1 is inserted just after 1 and 2 is inserted just after 2 and so on.
Example 2: Using selection.clone() with selection.order() method.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" path1tent="width=device-width,
initial-scale=1.0">
</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>
|
Output:
- Before clicking the button:
- After clicking the button: Please note that elements are exactly in the same order as they were before i.e 1, 2, 3, and 1, 2, 3.