如何将单个参数应用于缓和过渡？

Question

我过渡到像

这样的对象

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

在文档中有不同的参数可以操纵像 backInOut(t, 3.0) 这样的缓动类型，但我不知道如何应用 t 和不同的振幅... 有什么帮助吗？

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

Answer 1

在 d3.easeBackInOut 的特定情况下，您可以使用 overshoot() 设置振幅（在 API 中称为 overshoot）：

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

这里有一个使用3作为overshoot的demo（默认值为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，自动传递给缓动函数。

如何将单个参数应用于缓和过渡？

How to apply individual parameters to easing in transitions?

javascript

transition

easing

d3.js