d3.js selection.order()用法及代碼示例

selection.order()函數用於再次插入選擇，以使每個組的順序與選擇順序相匹配。

用法:

selection.order();

參數：該函數不接受任何參數。

返回值：此函數不返回任何內容。

範例1：使用selection.clone()方法而不使用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  
            // orginal order. 
            var div = d3.selectAll("div") 
                        .clone(true) 
        } 
        btn = document.querySelector(".btn"); 
        btn.addEventListener("click", func1); 
  
    </script> 
</body> 
  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：請注意，元素的插入順序與插入元素之前的順序不同，即1在1之後插入，2在2之後插入，依此類推。

範例2：使用selection.clone()和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 orginal order. 
            var div = d3.selectAll("div") 
                .clone(true) 
                .order(); 
        } 
        btn = document.querySelector(".btn"); 
        btn.addEventListener("click", func1); 
  
    </script> 
</body> 
  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：請注意，元素的順序與之前1、2、3和1、2、3完全相同。

相關用法

注：本文由純淨天空篩選整理自tarun007大神的英文原創作品 D3.js selection.order() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。