d3.js transform.scale()用法及代碼示例

D3.js庫中的transform.scale()函數用於獲取標度k₁等於k₀k的轉換，其中k₀是轉換的標度。

用法:

 transform.scale(k)

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

k:此參數是scale參數。

返回值：此函數返回轉換後的縮放行為。

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

範例1：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
  
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
  
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            Geeksforgeeks 
        </h1> 
  
        <h3>D3.js | transform.scale() Function</h3> 
  
        <script> 
            var svg = d3.select("body").append("svg") 
                .attr("width", 400) 
                .attr("height", 300); 
  
            var g1 = svg.append("g"), g2 = svg.append("g"); 
  
            var zoom1 = d3.zoom().on("zoom", function () { 
                g1.attr("transform", d3.event.transform); 
            }); 
  
            var zoom2 = d3.zoom().on("zoom", function () { 
                g2.attr("transform", d3.event.transform); 
            }); 
  
            g1.call(zoom1.transform, d3.zoomIdentity 
                .translate(150, 100) 
                .scale(2)); 
  
            g2.call(zoom2.transform, d3.zoomIdentity 
                .translate(150, 100) 
                .scale(2)); 
  
            g1.append("rect") 
                .attr("x", 20) 
                .attr("y", 20) 
                .attr("width", 60) 
                .attr("height", 60); 
  
            g2.append("rect") 
                .attr("x", 25) 
                .attr("y", 25) 
                .attr("width", 50) 
                .attr("height", 50) 
                .attr("fill", "green"); 
  
            d3.selectAll("rect").on("click", function () { 
  
                g1.transition() 
                    .duration(3000) 
                    .attr("transform", d3.zoomIdentity) 
                    .on("end", function () { 
                        d3.select(this).call(zoom1.transform, 
                            d3.zoomIdentity); 
                    }) 
  
                g2.transition() 
                    .duration(2000) 
                    .call(zoom2.transform,  
                            d3.zoomIdentity) 
            }); 
        </script> 
    </center> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
  
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            Geeksforgeeks 
        </h1> 
  
        <h3>D3.js | transform.scale() Function</h3> 
  
        <canvas width="500" height="300"></canvas> 
  
        <script> 
            var canvas = d3.select("canvas"), 
                context = canvas.node().getContext("2d"), 
                width = canvas.property("width"), 
                height = canvas.property("height"), 
                radius = 2.5; 
  
            var points = d3.range(300).map(phyllotaxis(10)), 
                point = points.pop(); 
  
            var zoom = d3.zoom() 
                .on("zoom", zoomed); 
  
            canvas 
                .call(zoom.transform, transform) 
                .call(transition); 
  
            function zoomed() { 
                context.save(); 
                context.clearRect(0, 0, width, height); 
                context.translate(d3.event.transform.x, 
                    d3.event.transform.y); 
                context.scale(d3.event.transform.k, 
                    d3.event.transform.k); 
                drawPoints(); 
                context.restore(); 
            } 
  
            function drawPoints() { 
                context.beginPath(); 
                points.forEach(drawPoint); 
                context.fillStyle = "#8d0396"; 
                context.fill(); 
  
                context.beginPath(); 
                drawPoint(point); 
                context.fillStyle = "#00ab1c"; 
                context.fill(); 
                context.stroke(); 
            } 
  
            function drawPoint(point) { 
                context.moveTo(point[0] + radius, point[1]); 
                context.arc(point[0], point[1],  
                        radius, 0, 2 * Math.PI); 
            } 
  
            function transform() { 
                return d3.zoomIdentity 
                    .translate(width / 2, height / 2) 
                    .scale(8) 
                    .translate(-point[0], -point[1]); 
            } 
  
            function transition(canvas) { 
                var n = points.length, 
                    i = Math.random() * n | 0, 
                    c = points[i]; // Pick a random point. 
  
                points[i] = points[n - 1]; 
                points[n - 1] = point; 
                point = c; 
  
                canvas.transition() 
                    .delay(500) 
                    .duration(3000) 
                    .call(zoom.transform, transform) 
                    .on("end", function ()  
                        { canvas.call(transition); }); 
            } 
  
            function phyllotaxis(radius) { 
                var theta = Math.PI * (3 - Math.sqrt(5)); 
                return function (i) { 
                    var r = radius * Math.sqrt(i),  
                            a = theta * i; 
                    return [ 
                        width / 2 + r * Math.cos(a), 
                        height / 2 + r * Math.sin(a) 
                    ]; 
                }; 
            } 
        </script> 
    </center> 
</body> 
  
</html>

輸出：

相關用法

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