旋转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/