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

D3.js中的selection.transition()函數用於獲取具有指定名稱的給定選擇的新過渡。新的過渡僅與相同名稱的其他過渡互斥。

用法:

selection.transition([name])

參數：此函數接受上述和以下描述的以下參數：

name:此參數是過渡實例。

返回值：該函數在具有指定名稱的給定選擇上返回新的過渡。

以下示例程序旨在說明D3.js中的selection.transition()函數。

範例1：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"> 
    <script src="https://d3js.org/d3.v4.min.js">  
    </script> 
      
    <style> 
        #GFG { 
            height:200px; 
            width:200px; 
            background-color:black; 
        } 
    </style> 
</head>  
       
<body>  
    <center> 
        <h1 style="color:green;">  
            Geeksforgeeks  
        </h1>  
         
        <h3>D3.js | selection.transition() Function</h3> 
             
        <div id="GFG"></div> 
             
        <script> 
            d3.select("#GFG") 
                .transition() 
                .style("background-color", "red"); 
        </script>  
    </center> 
</body>  
</html>

輸出：

範例2：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"> 
    <script src="https://d3js.org/d3.v4.min.js">  
    </script> 
</head>  
       
<body>  
    <center> 
        <h1 style="color:green;">  
            Geeksforgeeks  
        </h1>  
         
        <h3>D3.js | selection.transition() Function</h3> 
             
        <button onclick="triggerTransition()">Click</button> 
  
        <div> 
          <svg width="400px" height="200px"> 
              <rect
                id="rectArea" x="50" y="50"
                width="100" height="100" stroke="black"
                fill="purple" stroke-width="5"/> 
          </svg> 
        </div> 
             
        <script> 
            function triggerTransition(){ 
                d3.select("#rectArea") 
                    .transition() 
                    .delay(100) 
                    .duration(2000) 
                    .attr("width", "330") 
            } 
        </script>  
    </center> 
</body>  
</html>

輸出：

相關用法

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