D3.js easepoly() Function
Last Updated :
30 Sep, 2020
The d3.easePoly() function in d3.js is used to give the symmetric polynomial effect to a particular element. This poly easing function is used as a parameter within the d3.ease() function.
Approach: D3.js transition function will be used for applying different easing effects on a particular element. First of all, create an SVG element and append it to the body of the HTML page, then create a circle and append it to the SVG. Set some attributes of the circle to give it nice color and size and apply the d3.transition function followed by the ease() function and give the d3.easePoly as a parameter to ease function.
Syntax:
svg.append().attr().ease(d3.easePoly).attr();
Parameter: This function does not accept any parameters.
Return Value: This function does not return anything.
Below given are a few examples of the function given above.
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="
width=device-width, initial-scale=1.0">
<script type="text/javascript"
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<svg width="500px" height="500px"></svg>
<script>
var svg = d3.select("svg")
.attr("transform", "translate(0, -50)");
svg.append("circle")
.attr("cx", 100)
.attr("r", 50)
.attr("cy", 100)
.attr("fill", "green")
.transition()
// Use of d3.easePoly function
.ease(d3.easePoly)
.attr("r", 10)
.attr("fill", "red")
.duration(1500);
</script>
</body>
</html>
|
Output:
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="
width=device-width, initial-scale=1.0">
<script type="text/javascript"
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<svg width="500px" height="500px"></svg>
<script>
var svg = d3.select("svg")
svg.append("rect")
.attr("x", 50)
.attr("width", 10)
.attr("height", 10)
.attr("fill", "green")
.transition()
// Use of d3.easePoly function
.ease(d3.easePoly)
.attr("width", 100)
.attr("height", 100)
.attr("fill", "red")
.duration(1500);
</script>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...