D3.js transform.scale() Function

0 0 2 minutes read

The transform.scale() function in D3.js library is used to get the transformation whose scale k₁ is equal to k₀k, where k₀ is the transform’s scale.

Syntax:

 transform.scale(k)

Parameters: This function accepts a single parameter as mentioned above and described below.

k: This parameter is the scale argument.

Return value: This function returns the transformed zoom behaviour.

Below programs illustrate the transform.scale() function in D3.js library.

Example 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;"> 
            Geeksforzambiatek 
        </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> 

Output:

Example 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;"> 
            Geeksforzambiatek 
        </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> 