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

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
  
    <title> 
        D3.js | transform.translate() Function 
    </title> 
  
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"> 
    </script> 
  
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            Geeksforgeeks 
        </h1> 
  
        <h3>D3.js | transform.translate() Function</h3> 
  
        <svg height="200px" width="400px"> 
            <g id="GFG" transform= 
                "translate(25,25) scale(0.25)"> 
            </g> 
        </svg> 
  
        <script> 
            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); 
            }) 
        </script> 
    </center> 
</body> 
  
</html>

输出：

范例2：

HTML

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

输出：

相关用法

注：本文由纯净天空筛选整理自SHUBHAMSINGH10大神的英文原创作品 D3.js transform.translate() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。