旋轉svg：線在d3的一端旋轉

Question

我試圖在按下按鈕時交換我的圖的軸（svg:line元素）。 我希望過渡發生像一個時鐘的撥號。

線

d3.select(".yAxis").transition().duration(500).attr("transform", function() { 
    var value = invert?0:90; 
    return "rotate("+value+" "+x1+","+y1+")"; 
}); 

同時做翻譯&旋轉未供應我的目的。

我希望線條只是旋轉約（x1，y1）而不是翻譯&旋轉。

我應該怎麼做呢？

爲了更清楚，這裏是the fiddle

Answer 1

好吧，這個問題真的選了我的好奇心，但我想我找到了解決辦法。基本上，變換插值沒有達到你的期望，你必須使用string interpolation。

d3.select(".xAxis") 
     .transition() 
     .duration(500) 
     .attrTween("transform", function() { 
      var startAngle = invert ?-90:0; 
      var endAngle = invert?0:-90; 
      return d3.interpolateString(
       "rotate("+startAngle+" "+ x +" "+ y +")", 
       "rotate("+endAngle+" "+ x +" "+ y +")" 
      );     
     }); 

此外，由於插補調用的旋轉中心相同，因此可以在兩軸之間考慮插值調用。

小提琴：http://jsfiddle.net/KVUUb/