D3.js zoom.scaleBy()函数

D3.js中的zoom.scaleBy()函数用于将所选元素的当前缩放变换缩放 k。参考点p确实移动。

句法：

zoom.scaleBy(selection, k[, p])

参数：此函数接受三个参数，如上所述，如下所述：

• selection：该参数可以是选择或过渡。
• k：此参数是比例因子，指定为数字或函数
• p：不指定p的值，默认值为视口范围的中心。

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

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

示例 1：

HTML

 
 
  
 
    
      
     
    
      
    
        circle {
          opacity: 0.7;
        }
        g.zoom-controls {
            cursor: pointer;
            pointer-events: all;
        }
        g.zoom-controls rect {
            fill: white;
            stroke: #596877;
            stroke-width: 1;
        }
        g.zoom-controls line {
            stroke: #596877;
            stroke-width: 2;
        }
    
 
    
 
    
         
            Geeksforgeeks 
         
      
        
            D3.js | zoom.scaleBy() Function
        
          
        
  
            
  
                
  
                    
  
                    
  
                    
                
  
                
  
                    
  
                    
  
                
  
            
  
        
          
        
            var radius = 10;
            var svg = d3.select('svg');  
            var dimension = document.body.getBoundingClientRect();
              
            var data = d3.range(0, 25).map(function() {
                return {
                x: getRandom(radius, dimension.width - radius),
                y: getRandom(radius, dimension.height - radius)
              }
            });
              
            var zoom = d3.zoom()
                .on('zoom', function() {
                canvas.attr('transform', d3.event.transform);
            });
              
            var canvas = svg
                .attr('width', dimension.width)
                .attr('height', dimension.height)
                .call(zoom)
                .insert('g', ':first-child');
  
            canvas.selectAll('circle')
                .data(data)
                .enter()
                .append('circle')
                .attr('r', radius)
                .attr('cx', function(d) {
                return d.x;
                }).attr('cy', function(d) {
                return d.y;
                }).style('fill', function() {
                return d3.schemeCategory10[getRandom(0, 9)]
                });
              
            d3.select('#zoom-in').on('click', function() {
                // Smooth zooming
                zoom.scaleBy(svg.transition().duration(750), 1.3);
            });
              
            d3.select('#zoom-out').on('click', function() {
                // Ordinal zooming
                zoom.scaleBy(svg, 1 / 1.3);
            });
              
            function getRandom(min, max) {
                min = Math.ceil(min);
                max = Math.floor(max);
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
         
    
 
  

输出：

示例 2：

HTML

 
 
 
    
      
    
    
      
 
    
 
    
         
            Geeksforgeeks 
         
      
        D3.js | zoom.scaleBy() Function
          
        
          
        
            const zoom_action = () => g.attr("transform", d3.event.transform);
  
            // Create the zoom handler
            const zoom = d3.zoom()
                    .on("zoom", zoom_action);
              
            // Get SVG element and apply zoom behaviour
            var svg = d3
              .select("svg")
              .call(zoom);
              
            // Create Group that will be zoomed
            var g = svg.append("g");
              
            // Create circle
            g.append("circle")
              .attr("cx",0)
              .attr("cy",0)
              .attr("r", 5)
              .style("fill","green");
              
            // Use of zoom.scaleBy Function
            zoom.scaleBy(svg, 5);
            zoom.translateBy(svg, 50, 50);
  
         
    
 
  

输出：