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 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>

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 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>