使用d3.js使矩形绕其中心奇怪地旋转 [英] Strange rotation of rectangle around its center using d3.js
本文介绍了使用d3.js使矩形绕其中心奇怪地旋转的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我打算使用d3.js围绕其中心旋转一个矩形. 我的代码是
I'm planning to rotate a rectangle around its center using d3.js. My code is
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)");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
它旋转并到达矩形的原始x,y坐标,但是 在旋转过程中不会绕其中心旋转.
It rotates and comes to its original x,y coordinates of rectangle, but does not rotate around its center during rotation.
我在网上找到的正确代码是
The correct code I found on web is
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)";
};
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
此矩形围绕其中心正确旋转.但是我看不到两个代码之间的任何区别.有什么区别?
This rectangle rotates around its center properly. But I can't see any difference between two codes. What's the difference?
推荐答案
如注释中所述,当您检查属性时,您可以清楚地看到区别...
As mentioned in the comment, you can clearly see the difference when you check the attributes...
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>
这篇关于使用d3.js使矩形绕其中心奇怪地旋转的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文