D3.js transform.invertX()函数

D3.js中的transform.invertX()函数用于得到指定x坐标的逆变换，(x – tx) / k。

句法：

transform.invertX(x)

参数：此函数接受以下参数，如上所述和如下所述：

• x：这个参数是x坐标。

返回值：此函数返回转换后的缩放行为。

下面的程序说明了D3.js中的transform.invertX()函数。

示例 1：

  

    
    
    
  
    
    

  

    
        
            Geeksforgeeks
        
  
        D3.js | transform.invertX() Function
  
        
            
                
                
            
        
  
        
            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 t = d3.event.transform;
                if (t.invertX(0) > x0)
                    t.x = -x0 * t.k;
                else if (t.invertX(width) < x1)
                    t.x = width - x1 * t.k;
                if (t.invertY(0) > y0)
                    t.y = -y0 * t.k;
                else if (t.invertY(height) < y1)
                    t.y = height - y1 * t.k;
                g.attr("transform", t);
            }
  
            function constr(transform, extent, 
                            translateExtent) {
                var dx0 = transform.invertX(extent[0][0])
                                - translateExtent[0][0],
                  
                    dy0 = transform.invertY(extent[0][1])
                                - translateExtent[0][1],
                  
                    dx1 = transform.invertX(extent[1][0])
                                - translateExtent[1][0],
                  
                    dy1 = transform.invertY(extent[1][1])
                                - translateExtent[1][1];
  
                return transform.translate(
                    dx1 > dx0 ? (dx1 + dx0) / 2 : 
                        Math.min(0, dx0) || Math.max(0, dx1),
  
                    dy1 > dy0 ? (dy1 + dy0) / 2 : 
                        Math.min(0, dy0) || Math.max(0, dy1)
                );
            }
        
    

  

输出：

示例 2：

  

    
    
    
  
    
        circle {
            opacity: 0.7;
        }
    

  

    
        
            Geeksforgeeks
        
  
        D3.js | zoom.invertX() Function
  
        
  
        
            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],
  
                    dy0 = transform.invertY(extent[0][1]) 
                                - translateExtent[0][1],
                      
                    dx1 = transform.invertX(extent[1][0]) 
                                - translateExtent[1][0],
                      
                    dy1 = transform.invertY(extent[1][1]) 
                                - translateExtent[1][1];
  
                return transform.translate(
                    dx1 > dx0 ? (dx1 + dx0) / 2 : 
                        Math.min(0, dx0) || Math.max(0, dx1),
                          
                    dy1 > dy0 ? (dy1 + dy0) / 2 : 
                        Math.min(0, dy0) || Math.max(0, dy1)
                );
            }
  
            var dimension = document.body
                .getBoundingClientRect();
  
            var radius = 10;
            var svg = d3.select('svg');
  
            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, 5)]
                });
        
    

  

输出：