D3.js selection.interrupt() Function

The selection.interrupt() function in D3.js is used to interrupts the active transition of the specified name on the selected elements, and cancels any pending transitions with the specified name.

Syntax:

selection.interrupt([name])

Parameters: This function accepts the following parameter as mentioned above and described below:

name: This parameter is the transition instance.

Return Value: This function returns a new transition on the given selection with the specified name.

Below programs illustrate the selection.interrupt() function in D3.js.

Example 1:

HTML

<!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>

Output:

Example 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>

Output:

D3.js selection.interrupt() Function

Explore