D3.js zoom.translateExtent()函数

D3.js中的zoom.translateExtent()函数用于将平移范围设置为指定的点数组 [[左上角，右下角]] 并返回此缩放行为。

句法：

zoom.translateExtent([extent])

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

• extent：此参数用于将车轮增量函数设置为指定函数。

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

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

示例 1：

 
 
 
    
        
     
    
       
    
    
 
      
 
    
         
            Geeksforgeeks 
         
        
        
  D3.js | zoom.translateExtent() Function
      
          
        
          
        
            var height = 300;
            var width = 300;
              
            var zoom = d3.zoom()
               .translateExtent([[0, 0], [300, 300]])
                .on("zoom", zoomed);
              
            var svg = d3.select("#GFG")
                    .append("svg")
                    .attr("width", height)
                    .attr("height", width)
                    .append("g")
                      
            svg.append("rect")
                    .attr("x", 0)
                    .attr("y", 0)
                    .attr("height", 200)
                    .attr("width", 400)
                    .style("fill", "green");
                         
                var circle = svg.append("circle")
                    .attr("cx", 100)
                    .attr("cy", 100)
                    .attr("r", 20)
                    .style("fill", "red")
                      
                svg.call(zoom);
                  
                function zoomed() {
                  circle.attr(
                    "transform", d3.event.transform);
                }
         
    
 
    

输出：

示例 2：

    
        
  
        
      
  
        
      
  
        
            #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.translateExtent() 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", 150).attr(
                  "height", 100).attr(
                  "x", 75).attr("y", 50);
  
                zoom = d3
                    .zoom()
                    .scaleExtent([1, 3])
                    .translateExtent([
                        [0, 0],
                        [width, height],
                    ])
                    .on("zoom", zoomed);
  
                svg.call(zoom);
  
                function zoomed() {
                    change = d3.event.transform;
                    console.log(change);
                    group.attr("transform", "translate(" +
                    [change.x, change.y] + ")scale(" + 
                    change.k + ")");
                    group.select("#shape").style(
                        "stroke-width", 3 / change.k + "px");
                }
            
        
    

输出：