The d3.zoom() Function in D3.js is used to create a new zoom behaviour. It is used to apply the zoom transformation on a selected element.
Syntax:
d3.zoom();
Parameters: This function does not accept any parameter.
Return Value: This function returns the zoom behaviour.
Below programs illustrate the d3.zoom() function in D3.js
Example 1: This example, Zooming and panning is done. Double click to zoom, the circle gets bigger.
<!DOCTYPE html> <html> <head>     <meta charset="utf-8">    </script>   </head>  <body>     <center>         <h1 style="color: green;">             Geeksforneveropen         </h1>               <h3>D3.js | d3.zoom() Function</h3>                   <div id="GFG"></div>                   <script>             var svg = d3.select("#GFG")               .append("svg")                 .attr("width", 300)                 .attr("height", 300)                 .call(d3.zoom().on("zoom", function () {                    svg.attr("transform", d3.event.transform)                 }))               .append("g")                           svg               .append("circle")                 .attr("cx", 150)                 .attr("cy", 150)                 .attr("r", 40)                 .style("fill", "green")                       </script>     </center> </body> </html> |
Output:
Example 2:
<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     </script>     <style>         svg text {              fill: green;              font: 20px sans-serif;              text-anchor: center;          }                    rect {           pointer-events: all;         }     </style> </head> <body>     <center>         <h1 style="color: green;">             Geeksforneveropen         </h1>               <h3>D3.js | d3.zoom() Function </h3>                   <svg></svg>                   <script>             var width = 400;             var height = 200;                           var svg = d3.select("svg")               .attr("width", width)               .attr("height", height);                             // The scale used to display the axis.             var scale = d3.scaleLinear()               .range([10, width-20])               .domain([0, 100]);                            var shadowScale = scale.copy();                           var axis = d3.axisBottom()               .scale(scale);                             var g = svg.append("g")               .attr("transform", "translate(0, 50)")               .call(axis);                             // Standard zoom behavior:             var zoom = d3.zoom()               .scaleExtent([1, 10])               .translateExtent([[0, 0], [width, height]])               .on("zoom", zoomed);                            // Call the Zoom.             svg.call(zoom);         </script>     </center> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
