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

D3.js中的selection.interrupt()函數用於中斷所選元素上指定名稱的活動轉換，並取消具有指定名稱的所有暫掛轉換。

用法:

selection.interrupt([name])

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

name:此參數是過渡實例。

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

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

範例1：

<!DOCTYPE html>  
<html>  
  
<head>  
    <meta charset="utf-8"> 
    <script src="https://d3js.org/d3.v5.min.js">  
    </script> 
      
    <style> 
        svg { 
          background-color:#de7d45; 
          display:block; 
        }; 
    </style> 
</head>  
       
<body>  
    <center> 
        <h1 style="color:green;">  
            Geeksforgeeks  
        </h1>  
         
        <h3>D3.js | selection.interrupt() Function</h3> 
          
        <button>Stop</button> 
        <svg width="500" height="150"></svg> 
          
        <script> 
            const svg = d3.select("svg"); 
            const local = d3.local(); 
            const button = d3.select("button"); 
            const circle = svg.append("circle") 
                .attr("r", 25) 
                .attr("cx", 30) 
                .attr("cy", 75) 
                .style("fill", "green") 
                .style("stroke", "black"); 
              
            circle.transition() 
                .delay(5000) 
                .duration(10000) 
                .ease(d3.easeLinear) 
                .attr("cx", 580) 
                .on("interrupt", function() { 
                    local.set(this, +d3.select(this) 
                    .attr("cx")) 
                }); 
              
            button.on("click", function() { 
                if (d3.active(circle.node())) { 
                    circle.interrupt(); 
                    this.textContent = "Resume"; 
                }  
                else { 
                    circle.transition() 
                    .ease(d3.easeLinear) 
                    .duration(function() { 
                        return 10000 * (560 - 
                        local.get(this)) / 560; 
                    }) 
                    .attr("cx", 580) 
                    this.textContent = "Stop"; 
                } 
            }) 
        </script>  
    </center> 
</body>    
</html>

輸出：

範例2：

HTML

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"> 
    <script src="https://d3js.org/d3.v5.min.js">  
    </script> 
</head>  
        
<body>  
    <center> 
        <h1 style="color:green;">  
            Geeksforgeeks  
        </h1>  
          
        <h3>D3.js | selection.interrupt() Function</h3> 
           
        <svg width="500" height="300"></svg> 
           
        <script> 
            var svg = d3.select("svg") 
              
            var circle = svg.selectAll("circle") 
                .data([1, 2, 3, 4]) 
                .enter() 
                .append("circle") 
                .style("fill", "green") 
                .attr("cx", 50) 
                .attr("cy", function(d) { 
                    return d * 50 
                }) 
                .attr("r", 20) 
                .on("click", function() { 
                    d3.select(this).interrupt() 
                }) 
              
            circle.transition() 
                .delay(function(d) { 
                    return d * 500; 
                }) 
                .duration(function(d) { 
                    return d * 1000; 
                }) 
                .attr("cx", 460) 
                .on("interrupt", function() { 
                    var elem = this; 
                    var targetValue = d3.active(this) 
                    .attrTween("cx")                   
                    .call(this)(1); 
                    d3.select(this).attr("cx", targetValue) 
                }) 
        </script>  
    </center> 
</body>  
</html>

輸出：

相關用法

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