使用 d3.js 围绕其中心奇怪旋转矩形答案

【问题标题】：Strange rotation of rectangle around its center using d3.js使用 d3.js 围绕其中心奇怪旋转矩形
【发布时间】：2015-09-05 07:19:47
【问题描述】：

我打算使用 d3.js 围绕其中心旋转一个矩形。我的代码是

var svg = d3.select("body")
  .append("svg").attr("width", 200).attr("height", 200).append("rect")
  .attr("x", 50)
  .attr("y", 50)
  .attr("fill", "black")
  .attr("width", 100)
  .attr("height", 100)
  .transition()
  .ease("linear")
  .duration(1000)
  .attr("transform", "rotate(180,100,100)");

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;

它旋转并回到矩形的原始 x,y 坐标，但是旋转过程中不绕其中心旋转。

我在网上找到的正确代码是

var svg = d3.select("body").append("svg").attr("width", 200).attr("height", 200);

var rect = svg.append("rect")
    .attr("x", 50)
    .attr("y", 50)
    .attr("width", 100)
    .attr("height", 100);

rect.transition().duration(5000)
    .attrTween("transform", rotTween);

function rotTween() {
    var i = d3.interpolate(0, 360);
    return function(t) {
        return "rotate(" + i(t) + ",100,100)";
    };
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;

这个矩形正确地围绕它的中心旋转。但我看不出两个代码之间有什么区别。有什么区别？

【问题讨论】：

D3.js animate rotation的可能重复
在您的示例中，补间将对旋转和平移的所有参数起作用。这就是你得到摆动效果的原因。矩形既是平移又是旋转。在示例中，您输入了 return "rotate(" + i(t) + ",100,100)"; 您可以看到补间中只有旋转角度受到影响。

标签： d3.js

【解决方案1】：

正如评论中提到的，你检查属性时可以清楚地看到区别......

var log = d3.ui.log("#log").style("vertical-align", "top"),
	logTween = d3.ui.log("#logTween").style("vertical-align", "top"),
    stoppedTween = false,
    stopped = false;
log.writeLine("translate\t\trotate")
logTween.writeLine("translate\t\trotate")

var rect = d3.select("body")
    .insert("svg", "#log").attr("width", 200).attr("height", 100).append("rect")
    .attr("x", 20)
    .attr("y", 20)
    .attr("fill", "black")
    .attr("width", 40)
    .attr("height", 40);

rect.transition()
    .ease("linear")
    .duration(1000)
    .attr("transform", "rotate(180,100,100)")
    .each("start", function () {
    d3.timer(function () {
        var t = d3.transform(rect.attr("transform"));
        log.writeLine([t.translate.map(f).join(","), f(t.rotate)].join("\t"))
        return stopped;
    })
})
    .each("end", function () {
    stopped = true
});
var svg = d3.select("body").insert("svg", "#logTween").attr("width", 100).attr("height", 100);

var rectTween = svg.append("rect")
    .attr("x", 20)
    .attr("y", 20)
    .attr("width", 40)
    .attr("height", 40);


rectTween.transition().duration(1000)
    .ease("linear")
    .attrTween("transform", rotTween)
    .each("start", function () {
    d3.timer(function () {
        var t = d3.transform(rectTween.attr("transform"));
        logTween.writeLine([t.translate.map(f).join(","), f(t.rotate)].join("\t"))
        return stoppedTween;
    })
})
    .each("end", function () {
    stoppedTween = true
});


function rotTween() {
    var i = d3.interpolate(0, 360);
    return function(t) {
        return "rotate(" + i(t) + ",40,40)";
    };
}

function f(x) {
    return d3.format(" >6.1f")(x)
}

div {white-space: pre;}
svg {overflow: visible;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="UTF-8"></script>
<script src="https://rawgit.com/cool-Blue/d3-lib/master/Output/log/log.js"></script>
<div id="log"></div>
<div id="logTween"></div>

【讨论】：