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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。