D3.js selection.interrupt()函数

D3.js中的selection.interrupt()函数用于中断选定元素上指定名称的活动过渡，并取消任何具有指定名称的未决过渡。

句法：

selection.interrupt([name])

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

• name：这个参数是过渡实例。

返回值：此函数返回具有指定名称的给定选择的新转换。

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

示例 1：

 
 
  
 
    
     
    
      
    
        svg {
          background-color: #de7d45;
          display: block;
        };
    
 
       
 
    
         
            Geeksforgeeks 
         
         
        D3.js | selection.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", "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";
                }
            })
         
    
   

输出：

示例 2：

HTML

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

在评论中写代码？请使用 ide.geeksforgeeks.org，生成链接并在此处分享链接。