在d3过渡期间返回位置

Question

我有一个元素，在5秒内从x = 0移动到x = 100，弹性缓和。

d3.select(this).transition()
    .duration(5000)
    .ease('elastic')
    .attr("x",100);

有没有办法在这个过渡期间“逐帧”地返回元素的位置？

Answer 1

您可以手动attrTween并在返回正确的转化属性值时产生副作用：Demo。

d3.select(this).transition()
    .duration(5000)
    .ease('elastic')
    .attrTween('x', function (d, i, a) {
         return function (t) {
             var ip_value = d3.interpolate(a, 100)(t);
             sideEffect(ip_value);
             return ip_value;
         };
     });