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?
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.