D3.js selection.order() Function
Last Updated :
01 Jul, 2021
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...