d3.js zoom.interpolate()用法及代碼示例

D3.js庫中的zoom.interpolate()函數用於設置將縮放過渡到指定函數的插值工廠。要在兩個視圖之間應用直接插值，請嘗試使用d3.interpolate。

用法:

 zoom.interpolate([interpolate])

參數：該函數接受如上所述和以下描述的單個參數。

interpolate:此參數是縮放過渡的持續時間。

返回值：此函數返回縮放行為。

以下示例程序旨在說明D3.js庫中的zoom.interpolate()函數。

範例1：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
  
    <script src= 
        "https://d3js.org/d3.v5.js"> 
    </script> 
  
    <style> 
        rect { 
            fill:blue; 
            opacity:0.5; 
            stroke:black; 
            stroke-width:1px; 
        } 
  
        svg { 
            border:1px solid; 
            font:13px sans-serif; 
        } 
    </style> 
  
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            Geeksforgeeks 
        </h1> 
  
        <h3>D3.js | zoom.interpolate() Function</h3> 
  
        <div id="GFG"> 
        </div> 
  
        <script> 
            var width = 400; 
            var height = 250; 
            var lengt = 30; 
  
            var numrects = 100; 
            var rects = []; 
  
            for (var i = 0; i < numrects; i++) 
                rects.push({ 
                    'x':1 + Math.floor(Math.random() * width), 
                    'y':1 + Math.floor(Math.random() * height), 
                    'h':3 + Math.floor(Math.random() * lengt), 
                    'w':3 + Math.floor(Math.random() * lengt) 
                }); 
  
            var zoomed = d3.zoom() 
                .interpolate(d3.interpolate) 
                .on('zoom', function (d) { 
                    g.attr('transform', 
                        d3.event.transform); 
                }); 
  
  
            var svg = d3.select('#GFG') 
                .append('svg') 
                .attr('width', width) 
                .attr('height', height) 
  
            var g = svg.append('g') 
  
            g.selectAll('rect') 
                .data(rects) 
                .enter() 
                .append('rect') 
                .attr('x', function (d) { return d.x; }) 
                .attr('y', function (d) { return d.y; }) 
                .attr('height', function (d) { return d.h; }) 
                .attr('width', function (d) { return d.w; }) 
                .classed('no-zoom', true) 
  
            svg.call(zoomed); 
        </script> 
    </center> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!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/5.7.0/d3.min.js"> 
    </script> 
        
    <style> 
        #svg { 
            background-color:rgb(149, 160, 230); 
        } 
        #shape { 
            fill:rgb(232, 7, 228); 
            stroke:white; 
            stroke-width:3px; 
        } 
        #shape:hover { 
            fill:rgb(13, 214, 30); 
        } 
    </style> 
</head>  
        
<body>  
    <center> 
        <h1 style="color:green;">  
            Geeksforgeeks  
        </h1>  
          
        <h3>D3.js | zoom.interpolate() Function</h3> 
            
        <div id="GFG"></div> 
            
        <script> 
            var width = 300, 
              height = 200; 
                
            var container = d3.select("#GFG").append("div"); 
                
            var svg = container.append("svg") 
                .attr("id", "svg") 
                .attr("width", width) 
                .attr("height", height); 
                
            var group = svg.append("g"); 
                
            var shape = group.append("rect") 
                   .attr("id", "shape") 
                   .attr("width", 50) 
                   .attr("height", 33) 
                   .attr("x", 125) 
                   .attr("y", 75); 
                
            zoom = d3.zoom() 
              .interpolate([1, 3]) 
              .interpolate(d3.interpolateZoom) 
              .translateExtent([[0, 0], [width, height]]) 
              .on("zoom", zoomed); 
                
            svg.call(zoom); 
                
            function zoomed() { 
            change = d3.event.transform; 
            group.attr("transform", "translate(" 
            + [change.x, change.y] + ")scale(" + change.k + ")") 
            group.select("#shape").style("stroke-width",  
             (3 / change.k) + "px"); 
            } 
        </script>  
    </center> 
</body>     
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自SHUBHAMSINGH10大神的英文原創作品 D3.js zoom.interpolate() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。