D3.js zoom.extent()函数

D3.js中的zoom.extent()函数用于将视口范围设置为指定的点数组[左上角，右下角]。

句法：

zoom.extent([extent])

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

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

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

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

示例 1：

 
 
 
    
  
     
   
 
    
 
    
         
            Geeksforgeeks 
         
      
        D3.js | zoom.extent() Function
          
        
          
        
            var svg = d3.select("#GFG")
              .append("svg")
                .attr("width", 300)
                .attr("height", 200)
                .call(d3.zoom()
                .extent([[0, 0], [200, 200]])
                .on("zoom", function () {
                   svg.attr(
             "transform", d3.event.transform)
                }))
              .append("g")
              
            svg
              .append("circle")
                .attr("cx", 150)
                .attr("cy", 100)
                .attr("r", 40)
                .style("fill", "green")
              
         
    
 
  
 

输出：

示例 2：

 
 
 
    
       
     
    
       
    
        svg text {  
            fill: green;  
            font: 20px sans-serif;  
            text-anchor: center;  
        }  
           
        rect {
          pointer-events: all;
        }
    
      
 
     
 
    
         
            Geeksforgeeks 
         
       
        D3.js | zoom.extent() Function
           
        
           
        
            var width = 400;
            var height = 200;
               
            var svg = d3.select("svg")
              .attr("width", width)
              .attr("height", height);
                 
            // The scale used to display the axis.
            var scale = d3.scaleLinear()
              .range([10, width-20])
              .domain([0, 100]);
                
            var shadowScale = scale.copy();
               
            var axis = d3.axisBottom()
              .scale(scale);
                 
            var g = svg.append("g")
              .attr("transform", "translate(0, 50)")
              .call(axis);
                 
            // Standard zoom behavior:
            var zoom = d3.zoom()
              .extent([[0, 0], [width, height]])
              .on("zoom", zoomed);
                
            // Call the Zoom.
            var rect = svg.append("rect")
              .attr("width", width)
              .attr("height", height)
              .attr("fill", "none")
              .call(zoom);
                
            function zoomed() {
              var t = d3.event.transform;
              scale.domain(t.rescaleX(shadowScale).domain());
              g.call(axis);
            }
         
    
 
   

输出：