Skip to content
Related Articles

Related Articles

D3.js transform.scale() Function
  • Last Updated : 15 Oct, 2020

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;">
            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>

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;">
            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>

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :