d3.js:如何在翻译时围绕其中心旋转SVG？

Question

问题:

我一直试图找到一个通用的解决方案,用于同时旋转和翻译带有d3.js v4.2.2的SVG.

我可以让SVG以正确的位置开始和结束,但中间的缓和是完全错误的.下面是一个JSFiddle,我在从DOM中拉出的同一个SVG的许多实例上进行了旋转+转换,每个实例根据数据点进行不同的旋转量.

需要注意的一点是,在从(100,100)转换为(500,500)以及从(0,0)开始时,我需要使用此解决方案.

https://jsfiddle.net/3jbv23em/

var serializer = new XMLSerializer();

var svgNode = serializer.serializeToString(document.querySelector('#svgs svg defs svg'));

var dataset = [1,8,15,22,29,36,43,50,57,64,71,78,85,92,99,106,113,120,127,134,141,148,155,162,169,176,183,190,197,204,211,218,225,232,239,246,253,260,267,274,281,288,295,302,309,316,323,330,337,344,351,358]

var wrapper = d3
    .select('#game svg')
        .attr('width', window.innerWidth)
        .attr('height', window.innerHeight)
    .selectAll('g')
        .data(dataset)
        .enter()
        .append('g')
            .html(function(d) { return svgNode; })
            .transition()
            .duration(1500)
            .attr('transform', function(d) { 
                return 'translate(500,300)' +
                       'rotate(' + d * 1.8 + ', 63, 54.77)';
            });

(不幸的是,我无法让D3 v4在JSFiddle中运行,所以JSFiddle在这里使用v3.但是,问题是一样的).

我的预期行为:所有的鸡围绕同一个中心旋转,从不延伸超过动画结束时看到的圆的尺寸.

实际结果:所有鸡围绕左上角的平移原始位置旋转,然后返回到最后的正确位置.

对我不起作用的解决方案:

如何在d3.js中围绕中心旋转对象

• 这是关于在更远的固定点周围旋转,而不是在试图旋转的物体上的点周围

SVG旋转锚点

• 这可能有效,但完全让我脱离了D3生态系统

如何相对于其中心点旋转或缩放(变换)SVG路径？

• 我需要解决方案从任意点开始,而不是始终是原点@(0,0)

结论:

我此刻感到很困惑,非常感谢任何帮助.谢谢你的时间.

Answer 1

Because D3 transitions applies both the translate and the rotate together you get some awkward looking animations even though the end result is what you are looking for.

D3 provides a d3.interpolateString which handles executing the animation the way you would like. d3.interpolateString requires a starting and ending transform. d3.interpolateString is used within attrTween.

Replace

.attr('transform', function(d) { 
    return 'translate(500,300)' +
           'rotate(' + d * 1.8 + ', 63, 54.77)';
});

With

.attrTween('transform', function(d, i, a) { 
    return d3.interpolateString('translate(0,0) rotate(0)',
                                'translate(500,300)' +
                                'rotate(' + d * 1.8 + ', 63, 54.77)');
});

Here is an updated jsfiddle with a tweak to the translation for better viewability for smaller screens.

https://jsfiddle.net/3jbv23em/16/

具有相同问题的有用链接是“ D3.js animaterotation ”。