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