The transform.translate() function in D3.js library is used to get the transformation whose translation tx1 and ty1 is equal to tx0 + tk x and ty0 + tk y, where tx0 and ty0 is the transform’s translation and tk is the transform’s scale.
Syntax:
transform.translate(x, y)
Parameters: This function accepts the following parameter as mentioned above and described below.
- x, y: These parameters are the translation point argument.
Return value: This function returns the transformed zoom behaviour.
Below programs demonstrates the transform.translate() function of D3.js library.
Example 1:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> D3.js | transform.translate() Function </title> </script> <script src= </script> </head> <body> <center> <h1 style="color: green;"> Geeksforneveropen </h1> <h3>D3.js | transform.translate() Function</h3> <svg height="200px" width="400px"> <g id="GFG" transform= "translate(25,25) scale(0.25)"> </g> </svg> <script> var svg = d3.select("#GFG"); svg.append("rect").attr({ "x": 0, "y": 0, "height": 100, "width": 100, "fill": "yellow" }) svg.append("rect").attr({ "x": 100, "y": 100, "height": 100, "width": 100, "fill": "orange" }) svg.append("rect").attr({ "x": 0, "y": 100, "height": 100, "width": 100, "fill": "red" }) svg.append("rect").attr({ "x": 100, "y": 0, "height": 100, "width": 100, "fill": "purple" }) var zoom = d3.behavior.zoom() .on("zoom", function () { var val_1 = d3.event.translate; var val_scale = d3.event.scale; svg.attr("transform", "translate(" + val_1[0] + "," + val_1[1] + ") scale(" + val_scale + ")") }) .scaleExtent([1, 10]) .scale(1).translate([0, 0]) d3.select("svg").call(zoom) d3.selectAll("rect").on("mousedown", function () { var scale = Math.random() * 3; var translate = [(Math.random() * 10, Math.random() * 10)] zoom.scale(scale); zoom.translate(translate); // New transition var T = svg.transition().duration(500) zoom.event(T); }) </script> </center> </body> </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> D3.js | transform.translate() Function </title> </script> <style> circle { opacity: 0.7; fill: green; } </style> </head> <body> <center> <h1 style="color: green;"> Geeksforneveropen </h1> <h3>D3.js | transform.translate() Function</h3> <svg></svg> <script> var transform = d3.zoomIdentity .translate(100, 0).scale(1); var zoom = d3.zoom().on("zoom", handleZoom); var svg = d3.select("svg") .attr('width', 400) .attr('height', 200) .style("background", "orange") .call(zoom) .call(zoom.transform, transform); var zoomable = svg .append("g") .attr("class", "zoomable") .attr("transform", transform); var circles = zoomable.append('circle') .attr("id", "circles") .attr("cx", 100) .attr("cy", 100) .attr('r', 30); function handleZoom() { if (zoomable) { zoomable.attr("transform", d3.event.transform); } }; </script> </center> </body> </html> |
Output:
