【问题标题】：d3.js: How to rotate an SVG around its center while translating?d3.js：如何在翻译时围绕其中心旋转 SVG？
【发布时间】：2016-08-31 05:14:20
【问题描述】：

问题：

我一直在尝试寻找一个通用的解决方案，用 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。但是，问题是一样的）。

我的预期行为：所有鸡都围绕同一个中心旋转，从未超出动画结束时看到的圆圈的尺寸。

实际结果：所有鸡围绕左上角翻译后的原始位置旋转，最后返回正确位置。

不适合我的解决方案：

How to rotate an object around the center in d3.js

这是关于围绕更远的固定点旋转，而不是围绕试图旋转的对象上的点进行旋转

SVG rotation anchorpoint

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

How do I rotate or scale (transform) an SVG path relative to its center point?

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

结论：

我现在很困惑，非常感谢任何帮助。感谢您的宝贵时间。

【问题讨论】：

与您的问题无关，但要在 JSfiddle 中使用 d3 4.x，您只需在 HTML 面板中引用它，如下所示：<script src="https://d3js.org/d3.v4.min.js"></script>

标签： javascript html css d3.js svg

【解决方案1】：

因为 D3 过渡同时应用了平移和旋转，所以即使最终结果是您正在寻找的结果，您也会得到一些看起来很尴尬的动画。

D3 提供了一个 d3.interpolateString ，它可以按照您想要的方式处理执行动画。 d3.interpolateString 需要开始和结束转换。 d3.interpolateString 在 attrTween 中使用。

替换

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

有

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

这是一个更新的 jsfiddle，对翻译进行了调整，以便在较小的屏幕上获得更好的可视性。

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

关于同一问题的有用链接是“D3.js animate rotation”。

【讨论】：