D3.js zoom.scaleTo() Function - GeeksforGeeks

31 Aug, 2020
The zoom.scaleTo() function in D3.js is used to scale the current zoon transform of the selected elements to k.
Syntax:
zoom.scaleTo(selection, k[, p])
Parameters: This function accept two parameter as mentioned above and described below
selection: This parameter can be selection or transition.
k: This parameter is a scale factor, specified either as numbers or as functions
Return Value: This function returns the zoom behavior.
Below programs illustrate the zoom.scaleTo() function in D3.js
Example 1:
HTML
<!DOCTYPE html> <html> <head>     <meta charset="utf-8">          <script src="https://d3js.org/d3.v4.min.js">     </script>          <style>        circle {          opacity: 0.7;        }        g.zoom-controls {            cursor: pointer;            pointer-events: all;        }        g.zoom-controls rect {            fill: white;            stroke: #596877;            stroke-width: 1;        }        g.zoom-controls line {            stroke: #596877;            stroke-width: 2;        }    </style>     </head>     <body>     <center>        <h1 style="color: green;">             Geeksforgeeks         </h1>               <h3>D3.js | zoom.scaleTo() Function</h3>                  <svg>          <g class="zoom-controls" transform="translate(10, 10)">            <g id="zoom-in" transform="translate(0, 0)">              <rect width="30" height="30"></rect>              <line x1="5" y1="15" x2="25" y2="15"></line>              <line x1="15" y1="5" x2="15" y2="25"></line>            </g>            <g id="zoom-out" transform="translate(30, 0)">              <rect width="30" height="30"></rect>              <line x1="5" y1="15" x2="25" y2="15"></line>            </g>          </g>        </svg>                  <script>            var radius = 10;            var svg = d3.select('svg');              var dimension = document.body.getBoundingClientRect();                          var data = d3.range(0, 25).map(function() {                return {                x: getRandom(radius, dimension.width - radius),                y: getRandom(radius, dimension.height - radius)              }            });                          var zoom = d3.zoom()                .on('zoom', function() {                canvas.attr('transform', d3.event.transform);              })                          var canvas = svg                .attr('width', dimension.width)              .attr('height', dimension.height)              .call(zoom)              .insert('g', ':first-child');            canvas.selectAll('circle')              .data(data)              .enter()              .append('circle')              .attr('r', radius)              .attr('cx', function(d) {                return d.x;              }).attr('cy', function(d) {                return d.y;              }).style('fill', function() {                return d3.schemeCategory10[getRandom(0, 9)]              });                          d3.select('#zoom-in').on('click', function() {              // Smooth zooming                zoom.scaleTo(svg.transition().duration(750), 1.3);            });                          d3.select('#zoom-out').on('click', function() {              // Ordinal zooming              zoom.scaleTo(svg, 1 / 1.3);            });                                        function getRandom(min, max) {              min = Math.ceil(min);              max = Math.floor(max);              return Math.floor(Math.random()                      * (max - min + 1)) + min;            }        </script>     </center></body>   </html> 
Output:
Example 2:
HTML
<!DOCTYPE html> <html> <head>     <meta charset="utf-8">          <script src="https://d3js.org/d3.v5.js">    </script>      </head>     <body>     <center>        <h1 style="color: green;">             Geeksforgeeks         </h1>               <h3>D3.js | zoom.scaleTo() Function</h3>                  <svg height="100px" width="100px"></svg>                  <script>        const zoom_action = () => g.attr("transform", d3.event.transform)          // Create the zoom handler        const zoom = d3                .zoom()                .on("zoom", zoom_action)                  // Get SVG element and apply zoom behaviour        var svg = d3          .select("svg")          .call(zoom)                  // Create Group that will be zoomed        var g = svg.append("g")                  // Create circle        g.append("circle")          .attr("cx",0)          .attr("cy",0)          .attr("r", 5)          .style("fill","green")                  // Use of zoom.scaleTo Function        zoom.scaleTo(svg, 5)        zoom.translateBy(svg, 50, 50)           </script>     </center></body>   </html> 
Output:
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to get character array from string in JavaScript?
How to filter object array based on attributes?
Roadmap to Become a Web Developer in 2022
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Installation of Node.js on Linux
How to insert spaces/tabs in text using HTML/CSS?