svg - 旋转 svg :line pivoted on one of its ends in 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 +")"
            );                  
        });

由于两个轴具有相同的旋转中心，因此也可以在两个轴之间考虑插值调用。

fiddle : http://jsfiddle.net/KVUUb/