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

D3.js中的d3.interrupt()函數用於中斷指定節點上指定名稱的活動轉換，並取消具有指定名稱的所有暫掛轉換。此函數類似於selection.interrupt()函數。

用法:

d3.interrupt(node[, name])

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

name:此參數是過渡實例。
node:此參數是傳遞參數的節點。

返回值：該函數返回一個中斷的活動轉換。

以下程序說明了D3.js中的d3.interrupt()函數。

範例1：

<!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 | d3.interrupt() Function</h3> 
           
        <svg width="400" height="250"></svg> 
           
        <script> 
            var svg = d3.select("svg") 
              
            var circle = svg.selectAll("circle") 
                .data([1, 2, 3, 4]) 
                .enter() 
                .append("circle") 
                .style("fill", "red") 
                .attr("cx", 50) 
                .attr("cy", function(d) { 
                    return d * 50 
                }) 
                .attr("r", 25) 
                .on("click", function() { 
                    d3.interrupt(d3.select(this)) 
                }) 
              
            circle.transition() 
                .delay(function(d) { 
                    return d * 500; 
                }) 
                .duration(function(d) { 
                    return d * 1000; 
                }) 
                .attr("cx", 360) 
                .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>

輸出：

範例2：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"> 
    <script src="https://d3js.org/d3.v5.min.js">  
    </script> 
       
    <style> 
        svg { 
          background-color:green; 
          display:block; 
        }; 
    </style> 
</head>  
        
<body>  
    <center> 
        <h1 style="color:green;">  
            Geeksforgeeks  
        </h1>  
          
        <h3>D3.js | d3.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", "yellow") 
                .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())) { 
                    d3.interrupt(circle); 
                    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>

輸出：

相關用法

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