D3.js transform.translate() Function

0 0 1 minute read

The transform.translate() function in D3.js library is used to get the transformation whose translation tx1 and ty1 is equal to tx0 + tk x and ty0 + tk y, where tx0 and ty0 is the transform’s translation and tk is the transform’s scale.

Syntax:

transform.translate(x, y)

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

x, y: These parameters are the translation point argument.

Return value: This function returns the transformed zoom behaviour.

Below programs demonstrates the transform.translate() function of D3.js library.

Example 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;"> 
            Geeksforzambiatek 
        </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> 

Output:

Example 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;"> 
            Geeksforzambiatek 
        </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> 