Published Jan 2, 2024
Contribute to Docs

The .ease() method is specific to the D3.js library, this is primarily used to add an easing effect to a transition. It allows to control the timing and pacing of transitions in animations.


  • selection: The selection of DOM elements to which transition will be applied.
  • duration: The time duration of the transition in milliseconds.
  • easingFunction: It is the easing function.

Some of the commonly used built-in easing functions include:

  • d3.easeLinear: Linear easing (constant speed).
  • d3.easeCubic: Cubic easing, which accelerates and decelerates smoothly.
  • d3.easeSin: Sinusoidal easing.
  • d3.easeQuad: Quadratic easing.
  • d3.easeBounce: Bouncing easing.
  • d3.easeElastic: Elastic easing with customizable amplitude and period.
  • d3.easeCircle: Circular easing, creating a circular motion.
  • d3.easeBack: Back easing with customizable overshoot.


Consider an HTML document with an SVG element containing a circle with the specified ID myCircle. Here’s a simple HTML structure with D3.js code to create the transition animation:

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg width="400" height="300">
<circle id="myCircle" cx="30" cy="40" r="40" fill="blue"></circle>
// D3.js code
var circle = d3.select('#myCircle');
// Apply a transition with a duration of 2000 milliseconds and linear easing
.attr('cx', 200)
.attr('cy', 40);

In this example, the .ease(d3.easeLinear) specifies that the transition should use a linear easing function. It provides a constant speed to the motion of the circle throughout the transition, resulting in a straight-line movement from the initial position to the final position.

The output of the mentioned code is as follows:

d3.easeLinear animation

All contributors

Looking to contribute?

Learn JavaScript:D3 on Codecademy