Question

我使用D3生成了一个几何SVG模式，我想为它制作动画。我想让圆圈和方形围绕它们的中心旋转。但是，当它们旋转时，中心点会沿着椭圆形路径移动，然后返回到正确的位置。

我的codepen在这里：http://codepen.io/andybarefoot/pen/bwkjaN 点击＆＃34;旋转＆＃34;在左上角显示异常行为。我的关键功能是旋转＆＃34;组＆＃34;看起来像这样：

    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能够响应＆＃34; （您可以调整窗口大小，对角线将改变角度以继续与屏幕的角对齐，而圆形和方形保持相同的宽高比。）

嵌套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功能，该功能可以使用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变换旋转过渡表现奇怪

1 个答案: