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

D3.js中的zoom.scaleExtent()函数用于将比例扩展设置为指定的数字数组[k0，k1]。 k0是最小允许比例因子，k1是最大允许比例因子

用法:

zoom.scaleExtent([extent])

参数：该函数接受如上所述和以下描述的单个参数

extent:可以将该参数定义为指定为返回此类数组的函数。

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

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

范例1：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"> 
       
    <script src="https://d3js.org/d3.v4.min.js">  
    </script> 
      
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"> 
    </script> 
      
</head>  
     
<body>  
    <center> 
        <h1 style="color:green;">  
            Geeksforgeeks  
        </h1>  
       
        <h3>D3.js | zoom.scaleExtent() Function</h3> 
           
        <svg height="200px" width="400px"> 
          <g id="main" transform="translate(25, 25) scale(0.25)"></g> 
        </svg> 
           
        <script> 
            var svg = d3.select("#main"); 
  
            svg.append( 
"rect").attr({"x":0, "y":0, "height":100, "width":100, "fill":"red"}) 
            svg.append( 
"rect").attr({"x":100, "y":100, "height":100, "width":100, "fill":"blue"}) 
            svg.append( 
"rect").attr({"x":0, "y":100, "height":100, "width":100, "fill":"green"}) 
            svg.append( 
"rect").attr({"x":100, "y":0, "height":100, "width":100, "fill":"purple"}) 
              
            var zoom = d3.behavior.zoom().on("zoom", function(){ 
              var t = d3.event.translate; 
              var s = d3.event.scale; 
                
              svg.attr( 
"transform", "translate("+t[0]+", "+t[1]+") scale("+s+")") 
                
            }) 
            .scaleExtent([1, 10]).scale(1).translate([0, 0]) 
              
            d3.select("svg").call(zoom) 
              
            d3.selectAll("rect").on("mousedown", function(){ 
              var scale = Math.random()*3; 
              var translate = [Math.random()*100, Math.random()*100] 
              zoom.scale(scale); 
              zoom.translate(translate); 
                
              //new transition 
              var T = svg.transition().duration(5000) 
              zoom.event(T); 
            }) 
        </script>  
    </center> 
</body>  
   
</html>

输出：

范例2：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"> 
    <script src="https://d3js.org/d3.v5.js"> 
    </script> 
       
    <style> 
        circle { 
            fill:green; 
            opacity:0.2; 
            stroke:black; 
            stroke-width:1px; 
        } 
           
        svg { 
            border:1px solid; 
            font:13px sans-serif; 
            text-anchor:middle; 
        } 
    </style> 
       
</head>  
     
<body>  
    <center> 
        <h1 style="color:green;">  
            Geeksforgeeks  
        </h1>  
       
   <h3>D3.js | zoom.scaleExtent() Function</h3> 
           
        <div id="gfg" 
             style="width:400px; 
             margin:auto"> 
        </div> 
           
        <script> 
            function zoom_filter(divId) { 
                var width = 400, height=250, maxR=30; 
               
                var svg = d3.select(divId) 
                            .append('svg') 
                            .attr('width', width) 
                            .attr('height', height) 
                var g = svg.append('g') 
               
                // create 15 circles 
                var numCircles = 55; 
                var circles = []; 
                for (var i = 0; i < numCircles; i++) 
                    circles.push( 
{'x':1+Math.floor(Math.random() * width), 
              'y':1+Math.floor(Math.random() * height), 
              'r':1+Math.floor(Math.random() * maxR)}); 
               
                g.selectAll('circle') 
                    .data(circles) 
                    .enter() 
                    .append('circle') 
                    .attr('cx', function(d) { return d.x; }) 
                    .attr('cy', function(d) { return d.y; }) 
                    .attr('r', function(d) { return d.r; }) 
                    .classed('no-zoom', true) 
               
                var zoom = d3.zoom() 
                    .scaleExtent([1, 10]) 
                    .on('zoom', function(d) { g.attr( 
'transform', d3.event.transform); }); 
               
                svg.call(zoom); 
            } 
        </script>  
           
        <script> 
            zoom_filter('#gfg'); 
        </script> 
    </center> 
</body>  
   
</html>

输出：

相关用法

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