帶轉換的線性/增量旋轉動畫

Question

我想要使用transform屬性和D3中的轉換方法來獲取要轉動的SVG形狀。這裏是包含一個例子的jsfiddle：我使用兩個按鈕，左和右，通過增加其角度45或-45度來旋轉矩形。當形狀達到180度或180度時，過渡將以相反的方式旋轉形狀，而不是直線移動到下一個角度。使用控制檯日誌記錄，我發現我的代碼生成的角度沒有任何問題。看起來D3是如何處理轉換的，因爲生成的XML沒有顯示與當前相同的角度（例如，當在225度時，D3給予矩形旋轉-135代替）。

從我從文檔中閱讀和理解的內容中，我需要使用自定義的Tween，但我不確定從何處開始使用自定義補間，因爲我無法找到任何示例特定或類似的示例來幫助我瞭解它是如何工作的。

Answer 1

正確;您可以使用自定義補間來更改插補器。 D3有一個特殊的interpolator for transforms，但它不適合你的情況。 （我認爲這可能應該被修正了一個錯誤，所以我申請issue 661）下面是一個例子使用interpolateString代替：

d3.select("rect").transition().attrTween("transform", function(d) { 
    return d3.interpolateString(
    "rotate("+ d.a +")", 
    "rotate(" + (d.a += 45) + ")" 
); 
});