D3.js中围绕顶点旋转多边形的动画路径异常问题

我在D3.js中尝试围绕三角形的一个顶点执行旋转动画，最终能到达正确位置，但动画路径始终迂回曲折。试过三种实现方式：

• 旋转组元素

  function rotateUp() {
      d3.selectAll("g")
      .transition()
      .duration(2000)
      .attr("transform","rotate(-90,50,50)");
  }
  

• 旋转组内的多边形元素

  function rotateUp() {
      d3.selectAll("polygon")
      .transition()
      .duration(2000)
      .attr("transform","rotate(-90,0,50)");
  }
  

• 使用无组的独立多边形（绝对坐标）

  function rotateUp() {
      d3.selectAll("polygon")
      .transition()
      .duration(2000)
      .attr("transform","rotate(-90,50,50)");
  }
  

三种方式都能到达目标位置，但路径均存在迂回。将三角形置于原点(0,0)并围绕原点旋转时，动画路径正常，推测问题根源在于非原点旋转的过渡逻辑。

问题原因 #

D3默认会对transform属性做字符串插值，而非单独解析旋转的角度、中心坐标做数值插值。这种处理方式会导致非原点旋转时，过渡过程中生成不符合预期的中间变换值，最终出现迂回路径。

解决方法 #

使用attrTween自定义过渡的插值逻辑，手动拆分旋转参数并对角度做线性数值插值，保持旋转中心固定：

function rotateUp() {
  d3.selectAll("polygon")
    .transition()
    .duration(2000)
    .attrTween("transform", function() {
      // 解析初始旋转参数，无初始transform则默认rotate(0,50,50)
      const initialTransform = d3.select(this).attr("transform") || "rotate(0,50,50)";
      const [initialAngle, cx, cy] = initialTransform.match(/rotate\((-?\d+),(-?\d+),(-?\d+)\)/).slice(1).map(Number);
      const targetAngle = -90;

      // 返回帧插值函数
      return function(t) {
        // 对角度做线性插值，t为0到1的过渡进度
        const currentAngle = initialAngle + (targetAngle - initialAngle) * t;
        return `rotate(${currentAngle},${cx},${cy})`;
      };
    });
}

原理说明 #

通过attrTween直接操控旋转角度的数值变化，确保过渡过程中只有角度线性递增/递减，旋转中心始终固定，动画会沿着预期的圆弧路径完成旋转，不会出现迂回。

内容的提问来源于stack exchange，提问作者David Rea