旋转svg：在d3中以一端为轴的线

我试图在按下按钮时交换图形的轴（

svg:line

elements）。 我希望这种转变像时钟的刻度盘一样发生

线路

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

正在同时进行平移和旋转，这不符合我的目的

我希望直线只围绕（x1，y1）旋转，而不是平移和旋转

我该怎么做呢

---

为了更清楚，这里是

好的，这个问题确实引起了我的好奇心，但我想我找到了解决办法。基本上，变换插值并没有达到预期效果，因此必须使用

由于两个轴具有相同的旋转中心，因此插值调用也可以在两个轴之间进行分解

---

小提琴：

棒极了。我以前不知道这件事。谢谢你，琼！

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 +")"
            );                  
        });