问题描述
我过渡到类似
.transition()
.duration(600)
.delay(function(d, i) { return (500 - (i * 40)); })
.ease(d3.easeBackInOut)
在文档中，可以使用不同的参数来操纵缓backInOut(t, 3.0)类型，例如backInOut(t, 3.0)但我不知道如何应用t和不同的振幅...对此有任何帮助吗？
1楼
在d3.easeBackInOut的特定情况下，您可以使用overshoot()来设置振幅（在称为过 overshoot() ：
.ease(d3.easeBackInOut.overshoot(s))
//your value here----------------^
这是一个使用3作为过冲的演示（默认值为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>
顺便说一句，您不需要弄乱t 。
它的值从0到1，将自动传递到缓动函数。