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();