D3：掷骰子（不受欢迎）

Question

我想 - 在 D3 的帮助下 - 以不同的速度围绕其中心旋转一个对象。只要旋转速度不太高，一切正常。但最终对象开始翻滚，即使旋转中心（明显）是固定的。

在http://jsfiddle.net/mcqnpgn6/找到掷骰子`

// initialize rotation angles
var dAngle = 10
var angles = []
var angle = 0;
for (i = 0; i < T; i++) {
  angles[i] = angle
  angle += dAngle > 0 ? dAngle : i
}

// create dice ....

// rotate dice
for (i = 0; i < T; i++) {
  dice.transition()
    .delay(i * dt)
    .duration(dt)
    .ease("linear")
    .attr("transform", "rotate(" + angles[i] + "," + cx + "," + cy + ")")
}

我做错了什么或理解错误？ 你将如何解决这个任务？

Answer 1

详细说明我的评论：http://jsfiddle.net/mcqnpgn6/25/。关键部分如下：

var theta = dAngle;

function rotate(){
  theta += dAngle;
  dice.attr("transform", "rotate(" + theta + "," + cx + "," + cy + ")")
  window.requestAnimationFrame(rotate);
}

rotate();