D3.js zoom.interpolate()函数

D3.js库中的zoom.interpolate()函数用于设置缩放转换到指定函数的插值工厂。要在两个视图之间应用直接插值，请尝试d3.interpolate代替。

句法：

zoom.interpolate([interpolate])

参数：此函数接受如上所述和下文所述的单个参数。

• interpolate：此参数是缩放过渡的持续时间。

返回值：此函数返回缩放行为。

下面的程序说明了D3.js库中的zoom.interpolate()函数。

示例 1：

HTML

  

    
  
    
    
  
    
        rect {
            fill: blue;
            opacity: 0.5;
            stroke: black;
            stroke-width: 1px;
        }
  
        svg {
            border: 1px solid;
            font: 13px sans-serif;
        }
    
  

  

    
        
            Geeksforgeeks
        
  
        D3.js | zoom.interpolate() Function
  
        
        
  
        
            var width = 400;
            var height = 250;
            var lengt = 30;
  
            var numrects = 100;
            var rects = [];
  
            for (var i = 0; i < numrects; i++)
                rects.push({
                    'x': 1 + Math.floor(Math.random() * width),
                    'y': 1 + Math.floor(Math.random() * height),
                    'h': 3 + Math.floor(Math.random() * lengt),
                    'w': 3 + Math.floor(Math.random() * lengt)
                });
  
            var zoomed = d3.zoom()
                .interpolate(d3.interpolate)
                .on('zoom', function (d) {
                    g.attr('transform',
                        d3.event.transform);
                });
  
  
            var svg = d3.select('#GFG')
                .append('svg')
                .attr('width', width)
                .attr('height', height)
  
            var g = svg.append('g')
  
            g.selectAll('rect')
                .data(rects)
                .enter()
                .append('rect')
                .attr('x', function (d) { return d.x; })
                .attr('y', function (d) { return d.y; })
                .attr('height', function (d) { return d.h; })
                .attr('width', function (d) { return d.w; })
                .classed('no-zoom', true)
  
            svg.call(zoomed);
        
    

  

输出：

示例 2：

HTML

 
 
 
    
      
    
         
    
    
        
    
        #svg {
            background-color: rgb(149, 160, 230);
        }
        #shape {
            fill: rgb(232, 7, 228);
            stroke: white;
            stroke-width: 3px;
        }
        #shape:hover {
            fill: rgb(13, 214, 30);
        }
    
 
        
 
    
         
            Geeksforgeeks 
         
          
        D3.js | zoom.interpolate() Function
            
        
            
        
            var width = 300,
              height = 200;
                
            var container = d3.select("#GFG").append("div");
                
            var svg = container.append("svg")
                .attr("id", "svg")
                .attr("width", width)
                .attr("height", height);
                
            var group = svg.append("g");
                
            var shape = group.append("rect")
                   .attr("id", "shape")
                   .attr("width", 50)
                   .attr("height", 33)
                   .attr("x", 125)
                   .attr("y", 75);
                
            zoom = d3.zoom()
              .interpolate([1, 3])
              .interpolate(d3.interpolateZoom)
              .translateExtent([[0, 0], [width, height]])
              .on("zoom", zoomed);
                
            svg.call(zoom);
                
            function zoomed() {
            change = d3.event.transform;
            group.attr("transform", "translate("
            + [change.x, change.y] + ")scale(" + change.k + ")")
            group.select("#shape").style("stroke-width", 
             (3 / change.k) + "px");
            }
         
    
    

输出：