svg - 旋转 svg:line 在 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) 旋转而不是平移和旋转。

我该怎么做呢？

为了更清楚，这里是小提琴

Answer 1

好的，这个问题确实引起了我的好奇心，但我想我找到了解决方案。基本上，变换插值没有达到您的预期，您必须使用字符串插值。

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/