0
我打算使用d3.js围绕其中心旋转矩形。 我的代码是使用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)");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
它旋转,涉及到其原始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)";
};
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
这个矩形围绕其中心旋转正确。但是我看不出两个代码之间有什么区别。有什么不同?
可能重复[D3.js动画旋转(HTTP:/ /stackoverflow.com/questions/13313043/d3-js-animate-rotation) –
在您的示例中,补间将适用于所有旋转和平移的参数。这就是你摆动效果的原因。 矩形既是平移又是旋转的。在这个例子中,你已经把_return旋转(“+ i(t)+”,100,100)“; _你可以看到只有旋转角度在tween中受到影响。 – Cyril