D3.js zoom.scaleTo()函数

D3.js中的zoom.scaleTo()函数用于将所选元素的当前缩放变换缩放到 k。

句法：

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

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

• selection：该参数可以是选择或过渡。
• k：此参数是比例因子，指定为数字或函数

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

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

示例 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.scaleTo() 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.scaleTo(svg.transition().duration(750), 1.3);
            });
              
            d3.select('#zoom-out').on('click', function() {
              // Ordinal zooming
              zoom.scaleTo(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.scaleTo() 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.scaleTo Function
        zoom.scaleTo(svg, 5)
        zoom.translateBy(svg, 50, 50) 
  
         
    
 
  
 

输出：