d3.js zoom.scaleTo()用法及代码示例

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

用法:

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

参数：该函数接受上面提到的和下面描述的两个参数

selection:该参数可以是选择或转换。
k:此参数是比例因子，可以指定为数字或函数

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

以下示例程序旨在说明D3.js中的zoom.scaleTo()函数

范例1：

HTML

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"> 
      
    <script src="https://d3js.org/d3.v4.min.js">  
    </script> 
      
    <style> 
        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; 
        } 
    </style> 
     
</head>  
    
<body>  
    <center> 
        <h1 style="color:green;">  
            Geeksforgeeks  
        </h1>  
      
        <h3>D3.js | zoom.scaleTo() Function</h3> 
          
        <svg> 
          <g class="zoom-controls" transform="translate(10, 10)"> 
            <g id="zoom-in" transform="translate(0, 0)"> 
              <rect width="30" height="30"></rect> 
              <line x1="5" y1="15" x2="25" y2="15"></line> 
              <line x1="15" y1="5" x2="15" y2="25"></line> 
            </g> 
            <g id="zoom-out" transform="translate(30, 0)"> 
              <rect width="30" height="30"></rect> 
              <line x1="5" y1="15" x2="25" y2="15"></line> 
            </g> 
          </g> 
        </svg> 
          
        <script> 
            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; 
            } 
        </script>  
    </center> 
</body>  
  
</html>

输出：

范例2：

HTML

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"> 
      
    <script src="https://d3js.org/d3.v5.js"> 
    </script> 
      
</head>  
    
<body>  
    <center> 
        <h1 style="color:green;">  
            Geeksforgeeks  
        </h1>  
      
        <h3>D3.js | zoom.scaleTo() Function</h3> 
          
        <svg height="100px" width="100px"></svg> 
          
        <script> 
        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)  
  
        </script>  
    </center> 
</body>  
  
</html>

输出：

相关用法

注：本文由纯净天空筛选整理自SHUBHAMSINGH10大神的英文原创作品 D3.js zoom.scaleTo() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。