Question

我正在尝试调用.attrTween()来平滑地设置对象的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)]
    }
  })

如果你想看看，这是jsfiddle：https://jsbin.com/ceronufuha/edit?html,js,output

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

为什么动画不流畅，我错过了什么？

Answer 1

您的代码不会平滑，因为值之间永远不会interpolates。在每个刻度线上你基本上找到一个索引并“跳”到它。如果你想在10秒的时间内在每个值之间进行动画处理，你需要更像下面这样写。我正在使用let svg = d3.select('svg') let text = svg.append('text') .attr({ x: 100, y: 100 }) .text('I should be animated smoothly') let positions = [10, 20, 15, 35, 70, 50, 30, 10, 30, 45] nextMove(0); function nextMove(i){ text.transition() .duration(10000 / positions.length) .ease('linear') .attr('y', positions[i]) .each('end', function(){ i += 1; if (i < positions.length){ nextMove(i); } }); }自动在当前y值和下一个y值之间创建插值。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
  <title>JS Bin</title>
</head>
<body>
  <svg height="400" width="400"></svg>
</body>
</html>

---
title: "german long date in rmarkdown"
output: html_document
---

**Date without dot**

`r format(Sys.Date(), "%d %B %Y")`  

**Date with dot**

`r format(Sys.Date(), "%d. %B %Y")`

d3.attrTween（）没有顺利动画

1 个答案: