Skip to content
Related Articles

Related Articles

D3.js transform.invert() Function
  • Last Updated : 23 Sep, 2020

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
<head
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"
    </script>
         
    <script src=
    </script>
</head
        
<body
    <center>
        <h1 style="color: green;"
            Geeksforgeeks 
        </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>

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
<head
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"
    </script>
         
    <style>
        circle {
          opacity: 0.7;
        }
    </style>
</head
       
<body
    <center>
        <h1 style="color: green;"
            Geeksforgeeks 
        </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>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :