D3.js 缩放()函数

D3.js中的d3.zoom()函数用于创建新的缩放行为。它用于对选定元素应用缩放变换。

句法：

d3.zoom();

参数：此函数不接受任何参数。

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

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

示例 1：此示例完成了缩放和平移。双击放大，圆圈变大。

 
 
 
    
     
      
  
 
    
         
            Geeksforgeeks 
         
      
        D3.js | d3.zoom() Function
          
        
          
        
            var svg = d3.select("#GFG")
              .append("svg")
                .attr("width", 300)
                .attr("height", 300)
                .call(d3.zoom().on("zoom", function () {
                   svg.attr("transform", d3.event.transform)
                }))
              .append("g")
              
            svg
              .append("circle")
                .attr("cx", 150)
                .attr("cy", 150)
                .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 | d3.zoom() 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()
              .scaleExtent([1, 10])
              .translateExtent([[0, 0], [width, height]])
              .on("zoom", zoomed);
               
            // Call the Zoom.
            svg.call(zoom);
         
    
 

输出：