具有過渡的線性/增量旋轉動畫

Question

我正在嘗試使用D3中的transform屬性和過渡方法來旋轉SVG形狀。 這是包含示例的jsfiddle： http ： //jsfiddle.net/TJd2a/

我正在使用兩個按鈕，左和右，通過將角度增加45或-45度來旋轉矩形。 當形狀達到180度或-180度時，過渡以相反的方式旋轉形狀，而不是線性移動到下一個角度。 使用控制台日志記錄，我發現我的代碼生成的角度沒有任何問題。 它似乎是D3如何處理轉換，因為生成的XML沒有顯示與當前相同的角度（例如，當處於225度時，D3給矩形一個-135的旋轉）。

根據我從文檔中讀到和理解的內容，我需要使用自定義Tween，但我不知道從哪里開始使用自定義補間，因為我找不到任何示例特定或類似的示例來幫助我理解它是如何工作的。

Answer 1

正確; 您可以使用自定義補間來更改插補器。 D3有一個特殊的變換內插器 ，但在你的情況下它並沒有做正確的事情。 （我認為這可能是一個應該修復的錯誤，所以我提交了問題661。 ）這是使用interpolateString的示例：

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