D3.js zoom() Function
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;"> Geeksforgeeks </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;"> Geeksforgeeks </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:
Please Login to comment...