D3.js 中断()函数

D3.js中的d3.interrupt()函数用于中断指定节点上指定名称的活动转换，并取消任何具有指定名称的未决转换。此函数类似于selection.interrupt()函数。

句法：

d3.interrupt(node[, name])

参数：此函数接受以下参数，如上所述和如下所述：

• name：这个参数是过渡实例。
• node：此参数是传递参数的节点。

返回值：此函数返回一个中断的活动转换。

下面的程序说明了D3.js中的d3.interrupt()函数。

示例 1：

 
 
 
    
     
    
 
        
 
    
         
            Geeksforgeeks 
         
          
        D3.js | d3.interrupt() Function
           
        
           
        
            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)
                })
         
    
 

输出：

示例 2：

 
 
 
    
     
    
       
    
        svg {
          background-color: green;
          display: block;
        };
    
 
        
 
    
         
            Geeksforgeeks 
         
          
        D3.js | d3.interrupt() Function
           
        Stop
        
           
        
            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";
                }
            })
         
    
  

输出：