The transform.invert() function in D3.js is used to get the inverse transformation of the specified point which is a two-element array of numbers [x, y]. The returned point is equal to [(x – tx) / k, (y – ty) / k].
Syntax:
transform.invert( point )
Parameters: This function accepts the following parameter as mentioned above and described below:
- x: This parameter is the specified point which is a two-element array of numbers [x, y].
Return Value: This function returns the transformed zoom behavior.
Below programs illustrate the transform.invert() function in D3.js.
Example 1:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </script> <script src= </script> </head> <body> <center> <h1 style="color: green;"> Geeksforneveropen </h1> <h3>D3.js | transform.invert() Function</h3> <svg width="300" height="300"> <g> <image xlink:href= uploads/20190710102234/download3.png" x="150" y="150" width="50" height="50"> </image> </g> </svg> <script> var zoom = d3.zoom() .on("zoom", zoomed); var svg = d3.select("svg").call(zoom), g = svg.select("g"), image = g.select("image"), width = +svg.attr("width"), height = +svg.attr("height"), x0 = +image.attr("x"), y0 = +image.attr("y"), x1 = +image.attr("width") + x0, y1 = +image.attr("height") + y0; zoom.scaleExtent([1, Math.min(width / (x1 - x0), height / (y1 - y0))]); function zoomed() { var t = d3.event.transform; if (t.invert([0, 0]) > [x0, y0]) { t.x = -x0 * t.k; t.y = -y0 * t.k; } else if (t.invert([width, height]) < [x1, y1]) { t.y = height - y1 * t.k; t.x = width - x1 * t.k; } g.attr("transform", t); } </script> </center> </body> </html> |
Output:
Example 2:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </script> <style> circle { opacity: 0.7; } </style> </head> <body> <center> <h1 style="color: green;"> Geeksforneveropen </h1> <h3>D3.js | zoom.invert() Function</h3> <div id="GFG"></div> <script> var margin = {top: 10, right: 30, bottom: 30, left: 60}, width = 360 - margin.left - margin.right, height = 250 - margin.top - margin.bottom; var svg = d3.select("#GFG") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + ", " + margin.top + ")"); var myURL = "https://raw.githubusercontent.com/" + "holtzy/D3-graph-gallery/master/DATA/iris.csv" d3.csv(myURL, function(data) { var x = d3.scaleLinear() .domain([4, 8]) .range([ 0, width ]); var xAxis = svg.append("g") .attr("transform", "translate(0, " + height + ")") .call(d3.axisBottom(x)); var y = d3.scaleLinear() .domain([0, 9]) .range([ height, 0]); svg.append("g") .call(d3.axisLeft(y)); var clip = svg.append("defs") .append("svg:clipPath") .attr("id", "clip") .append("svg:rect") .attr("width", width ) .attr("height", height ) .attr("x", 0) .attr("y", 0); var color = d3.scaleOrdinal() .domain(["setosa", "versicolor", "virginica" ]) .range([ "green", "red", "blue"]) var brush = d3.brushX() .extent( [ [0, 0], [width, height] ] ) .on("end", updateChart) var scatter = svg.append('g') .attr("clip-path", "url(#clip)") scatter.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", function (d) { return x(d.Sepal_Length); } ) .attr("cy", function (d) { return y(d.Petal_Length); } ) .attr("r", 8) .style("fill", function (d) { return color(d.Species) } ) .style("opacity", 0.5) scatter.append("g") .attr("class", "brush") .call(brush); var idleTimeout function idled() { idleTimeout = null; } function updateChart() { extent = d3.event.selection if(!extent){ if (!idleTimeout) return idleTimeout = setTimeout(idled, 350); x.domain([ 4, 8]) } else{ x.domain([ x.invert(extent[0]), x.invert(extent[1]) ]) scatter.select(".brush") .call(brush.move, null) } xAxis.transition() .duration(1000) .call(d3.axisBottom(x)) scatter.selectAll("circle") .transition().duration(1000) .attr("cx", function (d) { return x(d.Sepal_Length); } ) .attr("cy", function (d) { return y(d.Petal_Length); } ) } }) </script> </center> </body> </html> |
Output:
