D3.js d3.attrTween（）未平滑设置动画

我正在尝试调用

.attrween（）

来平滑地设置对象的

y

属性的动画

以下是我使用的代码：

let svg = d3.select('svg')

svg.append('text')
  .attr({ x: 100, y: 100 })
  .text('I should be animated smoothly')

// animate consecutively through all positions
let positions = [10, 20, 15, 35, 70, 50, 30, 10, 30, 45]

svg.transition()
  .duration(10000)
  .ease('linear')
  .selectAll('text')
  .attrTween('y', function() {
    return function(t) {
       return positions[Math.floor(t * 10)]
    }
  })

如果您想看一看，下面是JSFIDLE：

（当然，这是一个过于简化的示例。）

---

为什么动画不平滑，我缺少什么吗？

您的代码不会平滑，因为它从不在值之间切换。在每个刻度上，你基本上都会找到一个索引并“跳转”到它。如果您想在10秒钟的时间内在这些值之间设置动画，您需要像下面这样编写。我使用的是

.transition（）…attr（）

，它会自动在当前y值和下一个y值之间创建一个插值器

让svg=d3。选择（'svg'）
让text=svg.append（'text'）
.attr（{x:100，y:100}）
.text（'我应该平滑地设置动画'）
让位置=[10,20,15,35,70,50,30,10,30,45]
下一次移动（0）；
功能下一步（i）{
text.transition（）
.持续时间（10000个位置/长度）
.ease（“线性”）
.attr（'y'，位置[i]）
.each（'end'，function（）{
i+=1；
如果（i<位置长度）{
下一个动议（i）；
}
});
}

JS-Bin

您的代码不会平滑，因为它从不在值之间切换。在每个刻度上，你基本上都会找到一个索引并“跳转”到它。如果您想在10秒钟的时间内在这些值之间设置动画，您需要像下面这样编写。我使用的是

.transition（）…attr（）

，它会自动在当前y值和下一个y值之间创建一个插值器

让svg=d3。选择（'svg'）
让text=svg.append（'text'）
.attr（{x:100，y:100}）
.text（'我应该平滑地设置动画'）
让位置=[10,20,15,35,70,50,30,10,30,45]
下一次移动（0）；
功能下一步（i）{
text.transition（）
.持续时间（10000个位置/长度）
.ease（“线性”）
.attr（'y'，位置[i]）
.each（'end'，function（）{
i+=1；
如果（i<位置长度）{
下一个动议（i）；
}
});
}

JS-Bin