Skip to content
Related Articles

Related Articles

D3.js transform.invertY() Function

Improve Article
Save Article
  • Last Updated : 15 Oct, 2020
Improve Article
Save Article

The transform.invertY() function in D3.js library is used to get the inverse transformation of the specified y-coordinate, (y – ty) / k.

Syntax:

transform.invertY( y )

Parameters: This function accepts the following parameter as mentioned above and described below

  • y: This parameter is the y-coordinate.

Return value: This function returns the transformed zoom behavior.

Below programs illustrate the transform.invertY() function in D3.js library.

Example 1:

HTML




<!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.invertY() Function</h3>
  
        <svg width="300" height="300">
            <g>
                <image xlink: href=
                x="150" y="150" width="50" height="50">
                </image>
            </g>
        </svg>
  
        <script>
            var zoom = d3.zoom()
                .on("zoom", zoomed)
                .constrain(constr);
  
            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 trans = d3.event.transform;
                if (trans.invertX(0) > x0)
                    trans.x = -x0 * trans.k;
                else if (trans.invertX(width) < x1)
                    trans.x = width - x1 * trans.k;
                if (trans.invertY(0) > y0)
                    trans.y = -y0 * trans.k;
                else if (trans.invertY(height) < y1)
                    trans.y = height - y1 * trans.k;
                g.attr("transform", trans);
            }
  
            function constr(transform, extent, 
                            translateExtent) {
                var dx0 = transform.invertX(
                        extent[0][0]) - translateExtent[0][0],
  
                    dx1 = transform.invertX(
                        extent[1][0]) - translateExtent[1][0],
  
                    dy0 = transform.invertY(
                        extent[0][1]) - translateExtent[0][1],
  
                    dy1 = transform.invertY(
                        extent[1][1]) - translateExtent[1][1];
  
                return transform.translate(
                    dx1 > dx0 ? (dx0 + dx1) / 2 : 
                        Math.min(0, dx0) || Math.max(0, dx1),
  
                    dy1 > dy0 ? (dy0 + dy1) / 2 : 
                        Math.min(0, dy0) || Math.max(0, dy1)
                );
            }
        </script>
    </center>
</body>
  
</html>

Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
  
    <script src=
    </script>
  
    <style>
        circle {
            opacity: 0.7;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            Geeksforgeeks
        </h1>
  
        <h3>D3.js | zoom.invertY() Function</h3>
  
        <svg></svg>
  
        <script>
            var radius = 15;
            var svg = d3.select('svg');
            var dimension = document.body
                .getBoundingClientRect();
  
            var data = d3.range(0, 50).map(function () {
                return {
                    x: getRandom(radius, 400 - radius),
                    y: getRandom(radius, 200 - radius)
                }
            });
  
            var zoom = d3.zoom()
                .constrain(mydata)
                .on('zoom', function () {
                    canvas.attr('transform', 
                            d3.event.transform);
                })
  
            var canvas = svg.attr('width', 400)
                .attr('height', 200)
                .call(zoom)
                .insert('g', ':first-child');
  
            canvas.selectAll('circle')
                .data(data)
                .enter()
                .append('circle')
                .attr('r', radius)
                .attr('cx', function (d) {
                    return d.x;
                })
                .attr('cy', function (d) {
                    return d.y;
                })
                .style('fill', function () {
                    return d3.schemeCategory10
                            [getRandom(0, 9)]
                });
  
            function getRandom(min, max) {
                min = Math.ceil(min);
                max = Math.floor(max);
                return Math.floor(Math.random() 
                        * (max - min + 1)) + min;
            }
  
            function mydata(transform, extent, 
                            translateExtent) {
                var dx0 = transform.invertX(
                        extent[0][0]) - translateExtent[0][0],
  
                    dx1 = transform.invertX(
                        extent[1][0]) - translateExtent[1][0],
  
                    dy0 = transform.invertY(
                        extent[0][1]) - translateExtent[0][1],
  
                    dy1 = transform.invertY(
                        extent[1][1]) - translateExtent[1][1];
  
                return transform.translate(
                    dx1 > dx0 ? (dx0 + dx1) / 2 : 
                        Math.min(0, dx0) || Math.max(0, dx1),
                          
                    dy1 > dy0 ? (dy0 + dy1) / 2 : 
                        Math.min(0, dy0) || Math.max(0, dy1)
                );
            }
        </script>
    </center>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!