D3.js zoom.scaleExtent()函数

D3.js中的zoom.scaleExtent()函数用于设置缩放扩展到指定的数字数组 [k0, k1]。 k0 是允许的最小比例因子，k1 是允许的最大比例因子

句法：

zoom.scaleExtent([extent])

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

• 范围：此参数可以定义为指定为返回此类数组的函数。

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

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

示例 1：

 
 
 
    
       
     
    
      
    
    
      
 
     
 
    
         
            Geeksforgeeks 
         
       
        D3.js | zoom.scaleExtent() Function
           
        
          
        
           
        
            var svg = d3.select("#main");
  
            svg.append(
"rect").attr({"x":0, "y":0, "height":100, "width":100, "fill":"red"})
            svg.append(
"rect").attr({"x":100, "y":100, "height":100, "width":100, "fill":"blue"})
            svg.append(
"rect").attr({"x":0, "y":100, "height":100, "width":100, "fill":"green"})
            svg.append(
"rect").attr({"x":100, "y":0, "height":100, "width":100, "fill":"purple"})
              
            var zoom = d3.behavior.zoom().on("zoom", function(){
              var t = d3.event.translate;
              var s = d3.event.scale;
                
              svg.attr(
"transform", "translate("+t[0]+", "+t[1]+") scale("+s+")")
                
            })
            .scaleExtent([1, 10]).scale(1).translate([0, 0])
              
            d3.select("svg").call(zoom)
              
            d3.selectAll("rect").on("mousedown", function(){
              var scale = Math.random()*3;
              var translate = [Math.random()*100, Math.random()*100]
              zoom.scale(scale);
              zoom.translate(translate);
                
              //new transition
              var T = svg.transition().duration(5000)
              zoom.event(T);
            })
         
    
 
   

输出：

示例 2：

 
 
 
    
    
    
       
    
        circle {
            fill: green;
            opacity: 0.2;
            stroke: black;
            stroke-width: 1px;
        }
           
        svg {
            border: 1px solid;
            font: 13px sans-serif;
            text-anchor: middle;
        }
    
       
 
     
 
    
         
            Geeksforgeeks 
         
       
   D3.js | zoom.scaleExtent() Function
           
        
        
           
        
            function zoom_filter(divId) {
                var width = 400, height=250, maxR=30;
               
                var svg = d3.select(divId)
                            .append('svg')
                            .attr('width', width)
                            .attr('height', height)
                var g = svg.append('g')
               
                // create 15 circles
                var numCircles = 55;
                var circles = [];
                for (var i = 0; i < numCircles; i++)
                    circles.push(
{'x': 1+Math.floor(Math.random() * width),
              'y': 1+Math.floor(Math.random() * height),
              'r': 1+Math.floor(Math.random() * maxR)});
               
                g.selectAll('circle')
                    .data(circles)
                    .enter()
                    .append('circle')
                    .attr('cx', function(d) { return d.x; })
                    .attr('cy', function(d) { return d.y; })
                    .attr('r', function(d) { return d.r; })
                    .classed('no-zoom', true)
               
                var zoom = d3.zoom()
                    .scaleExtent([1, 10])
                    .on('zoom', function(d) { g.attr(
'transform', d3.event.transform); });
               
                svg.call(zoom);
            }
         
           
        
            zoom_filter('#gfg');
        
    
 
   
 

输出：