D3.js selection.order()函数

selection.order()函数用于再次插入选择，使每个组的顺序与选择顺序匹配。

句法：

selection.order();

参数：此函数不接受任何参数。

返回值：此函数不返回任何内容。

示例 1：使用 selection.clone() 方法而不使用 selection.order() 方法。

HTML

 

    
    
    
    
 
    
        div {
            width: 300px;
            color: #ffffff;
            height: auto;
            background-color: green;
            margin: 10px;
        }
    

 

    
        GeeksforGeeks
    
 
     
D3.js selection.order() Function
 
 
    1. some text.
    2. some text.
    3. some text.
    click Here!
 
    
        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);
 
    

 

输出：

• 在点击按钮之前：

• 单击按钮后：请注意，元素的插入顺序与之前不同，即 1 在 1 之后插入，2 在 2 之后插入，依此类推。

示例 2：将 selection.clone() 与 selection.order() 方法一起使用。

HTML

 

    
    
    
    
 
    
        div {
            width: 300px;
            color: #ffffff;
            height: auto;
            background-color: green;
            margin: 10px;
        }
    

 

    
        GeeksforGeeks
    
 
     
D3.js d3.selection.order() Function
 
 
    1. some text.
    2. some text.
    3. some text.
    click Here!
 
    
        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);
 
    

 

输出：

• 在点击按钮之前：

• 单击按钮后：请注意，元素的顺序与之前完全相同，即 1、2、3 和 1、2、3。