Transformations

Introduction

Transformation is an attribute of SVG that helps in transforming one or more SVG elements. It can take one or more of the following values:

• Translate
• Rotate
• Scale
• Skew

Let’s explain them one by one through examples.

Translate

Translate is an important functionality in D3.js and is used to move the SVG elements inside the webpage. It takes two values, namely x and y. The x value translates the SVG element along the x-axis, while y translates the SVG element along the y-axis.

Let’s take a dive into the following code to see the transform function in action.