D3 SVG 变换旋转过渡行为异常

Question

我用 D3 生成了一个几何 SVG 图案，我想为它制作动画。我想让圆圈和正方形围绕它们的中心旋转。然而，当它们旋转时，中心点在返回正确位置之前沿着椭圆路径移动。

我的代码笔在这里：http://codepen.io/andybarefoot/pen/bwkjaN 单击左上角的 "spin" 显示异常行为。我旋转 "group" 的关键函数如下所示：

    function spinCircles() {
        d3
            .select("#fixedGroup")
            .attr("transform", "translate (0, 0) rotate(0)")
            .transition()
            .duration(4000)
            .attr("transform", function(d, i){
                return "translate (0, 0) rotate (90,"+m/2+","+m/2+")";
            })
        ;
    }

我怀疑复杂性是由于我嵌套了具有不同视图框的 SVG 元素，因为我希望我的 SVG 是 "responsive"。（您可以调整 window 的大小，对角线将改变角度以继续与屏幕的角对齐，而圆形和正方形保持相同的纵横比。）

嵌套 SVG 的代码如下所示：

        var baseSVG = d3.select("body")
            .append("svg")
            .attr("id", "baseSVG")
        ;
        var stretchSVG = baseSVG
            .append("svg")
            .attr("id", "stretchSVG")
            .attr("viewBox", "0 0 " + w + " " + h)
            .attr("preserveAspectRatio", "none")
        ;
        var fixedSVG = baseSVG
            .append("svg")
            .attr("id", "fixedSVG")
            .attr("viewBox", "0 0 " + m + " " + m)
        ;

然而，我也对我对 d3 中传输转换的糟糕理解的错误持开放态度...

非常感谢收到任何帮助！

Answer 1

要让 D3 围绕给定的中心旋转，您需要提供自定义 tween function which can make use of a string interpolator:

function spinCircles() {
  d3
    .selectAll("#fixedGroup")
    .transition()
    .duration(4000)
    .attrTween("transform", function() {
      var center = "" + m/2 + "," +  m/2;
      return d3.interpolateString("rotate(0," + center + ")", "rotate(90," + center + ")");
    });
}

查看 updated codepen 的工作示例。

D3 SVG 变换旋转过渡行为异常

D3 SVG transform rotation transition behaving weirdly

svg

transition

rotation

d3.js