D3 SVG变换旋转过渡行为奇怪 [英] D3 SVG transform rotation transition behaving weirdly

问题描述

我用D3生成了几何SVG模式，我想对它进行动画处理。
我想让圈子和方块绕着它们的中心旋转。
但是当他们旋转时，中心点沿着椭圆路径移动，然后返回正确的位置。

I generated a geometric SVG pattern with D3 and I wanted to animate it. I wanted to have the circles and square spinning around their centre. However when they rotate the centre point moves along an elliptical path before returning to the correct position.

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

My codepen is here: http://codepen.io/andybarefoot/pen/bwkjaN Clicking "spin" in the top left corner shows the unusual behaviour. My key function for rotating the "group" looks like this:

    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元素viewboxes，因为我想我的SVG是响应。 （您可以调整窗口大小，对角线将改变角度，以便与屏幕的各个角落保持一致，而圆和正方形保持相同的宽高比。）

I suspect the complexity arises from the fact that I have nested SVG elements with different viewboxes as I wanted my SVG to be "responsive". (You can resize the window and the diagonal lines will change angle to continue aligning with the corners of the screen, whilst the circles and square keep the same aspect ratio.)

嵌套SVG的代码如下所示：

The code for the nested SVGs looks like this:

        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中的转移过渡的错误理解。

However I'm also open to the fault lying with my lousy understanding of transfer transitions in d3...

任何帮助非常感谢！

推荐答案

围绕给定中心旋转，则需要提供自定义 tween 功能，可以使用字符串插值器：

For D3 to rotate around a given center, you need to provide a custom 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 + ")");
    });
} 

请查看更新的代码。

这篇关于D3 SVG变换旋转过渡行为奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！