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 – t_{x_{) / k, (y – t_y) / 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 src="https://d3js.org/d3.v4.min.js">  
    </script> 
         
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"> 
    </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= 
"https://media.geeksforgeeks.org/wp-content/cdn- 
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 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> 

Output:

Suggest improvement

D3.js bisect() Function

D3.js time.rangeRound() Function

Share your thoughts in the comments

D3.js transform.invert() Function

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?