Search code examples
javascriptd3.jstransitioneasing

How to apply individual parameters to easing in transitions?


I make a transition to objects like

.transition()
.duration(600)
.delay(function(d, i) { return (500 - (i * 40)); })
.ease(d3.easeBackInOut)

In the documentation there are different parameters possible to manipulate the type of easing like backInOut(t, 3.0) but I do not know how to apply t and a different amplitude... Any help on that?

https://github.com/d3/d3-ease#easeBackInOut


Solution

  • In the specific case of d3.easeBackInOut you can set the amplitude (called overshoot in the API) by using overshoot():

    .ease(d3.easeBackInOut.overshoot(s))
    //your value here----------------^ 
    

    Here is a demo using 3 as the overshoot (the default value is 1.70158):

    const svg = d3.select("svg");
    svg.append("circle")
      .attr("cx", 100)
      .attr("cy", 50)
      .attr("r", 10)
      .style("stroke", "black")
      .style("fill", "lightgray")
      .transition()
      .duration(2000)
      .ease(d3.easeBackInOut.overshoot(3))
      .attr("cx", 400);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
    <svg width="500" height="100"></svg>

    By the way, you don't need to mess with t. Its value, going from 0 to 1, is automatically passed to the easing function.