D3.js transform.translate()函数

D3.js库中的transform.translate()函数用于获取平移tx1和ty1等于tx0 + tk x和ty0 + tk y的变换，其中tx0和ty0是变换的平移， tk是变换的比例.

句法：

transform.translate(x, y)

参数：该函数接受上面提到和下面描述的以下参数。

• x, y：这些参数是平移点参数。

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

下面的程序演示了D3.js库的transform.translate()函数。

示例 1：

HTML

  

    
  
    
        D3.js | transform.translate() Function
    
  
    
    
  
    
    
  

  

    
        
            Geeksforgeeks
        
  
        D3.js | transform.translate() Function
  
        
            
            
        
  
        
            var svg = d3.select("#GFG");
  
            svg.append("rect").attr({ 
                "x": 0, "y": 0, "height": 100, 
                "width": 100, "fill": "yellow" 
            })
              
            svg.append("rect").attr({ 
                "x": 100, "y": 100, "height": 100, 
                "width": 100, "fill": "orange" 
            })
              
            svg.append("rect").attr({ 
                "x": 0, "y": 100, "height": 100, 
                "width": 100, "fill": "red" 
            })
              
            svg.append("rect").attr({ 
                "x": 100, "y": 0, "height": 100, 
                "width": 100, "fill": "purple" 
            })
  
            var zoom = d3.behavior.zoom()
                    .on("zoom", function () {
                var val_1 = d3.event.translate;
                var val_scale = d3.event.scale;
  
                svg.attr("transform", "translate(" 
                    + val_1[0] + "," + val_1[1] 
                    + ") scale(" + val_scale + ")")
  
            })
                .scaleExtent([1, 10])
                    .scale(1).translate([0, 0])
  
            d3.select("svg").call(zoom)
  
            d3.selectAll("rect").on("mousedown", 
            function () {
                var scale = Math.random() * 3;
                var translate = [Math.random() * 10, 
                            Math.random() * 10]
                zoom.scale(scale);
                zoom.translate(translate);
  
                // New transition
                var T = svg.transition().duration(500)
                zoom.event(T);
            })
        
    

  

输出：

示例 2：

HTML

  

    
  
    
        D3.js | transform.translate() Function
    
  
    
    
  
    
        circle {
            opacity: 0.7;
            fill: green;
        }
    
  

  

    
        
            Geeksforgeeks
        
  
        D3.js | transform.translate() Function
  
        
  
        
            var transform = d3.zoomIdentity
                .translate(100, 0).scale(1);
  
            var zoom = d3.zoom().on("zoom", handleZoom);
  
            var svg = d3.select("svg")
                .attr('width', 400)
                .attr('height', 200)
                .style("background", "orange")
                .call(zoom)
                .call(zoom.transform, transform);
  
            var zoomable = svg
                .append("g")
                .attr("class", "zoomable")
                .attr("transform", transform);
  
            var circles = zoomable.append('circle')
                .attr("id", "circles")
                .attr("cx", 100)
                .attr("cy", 100)
                .attr('r', 30);
  
            function handleZoom() {
                if (zoomable) {
                    zoomable.attr("transform", 
                            d3.event.transform);
                }
            };
        
    

  

输出：