Skip to content
Related Articles

Related Articles

D3.js transform.translate() Function
  • Last Updated : 15 Oct, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
    </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>

chevron_right


Output:

Example 2:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :