我试图在d3.js中围绕它的一个顶点旋转一个三角形，虽然它最终在正确的地方，但它需要蜿蜒的路径才能到达那里。
我已经尝试旋转组(在每种情况下点击三角形开始旋转):旋转组
function rotateUp() {
d3.selectAll("g")
.transition()
.duration(2000)
.attr("transform","rotate(-90,50,50)");
}
在组内旋转多边形:旋转三角形
function rotateUp() {
d3.selectAll("polygon")
.transition()
.duration(2000)
.attr("transform","rotate(-90,0,50)");
}
且使用不带群的裸多边形和不带translate()的绝对坐标:旋转三角形，没有组
function rotateUp() {
d3.selectAll("polygon")
.transition()
.duration(2000)
.attr("transform","rotate(-90,50,50)");
}
每次我都能把它送到正确的目的地，但总是绕道而行。
我尝试将三角形定位在0,0并围绕该点旋转，并且它有效。所以问题似乎与绕原点以外的物体旋转有关?
D3插值器很棒，但有时会发生那些奇怪的行为(你可以在这个Github问题中阅读更多关于它的信息)。这里的解决方案是使用attrTween与插值器仅用于角度:
function myTween(angle, x, y) {
const i = d3.interpolate(0, angle);
return t => `rotate(${i(t)},${x},${y})`;
};
下面是基于第二个代码的演示，将三角形旋转到左下角:
function loaded() {
let g = d3.select("#graph")
.append("g")
.attr("transform", "translate(50,50)");
g
.append("polygon")
.attr("id", "triangle")
.attr("points", "0,0 50,100 0,50")
.style("fill", "red")
.on("click", rotateUp)
}
function rotateUp() {
d3.selectAll("polygon")
.transition()
.duration(2000)
.attrTween("transform", () => myTween(-90, 0, 50));
}
function myTween(angle, x, y) {
const i = d3.interpolate(0, angle);
return t => `rotate(${i(t)},${x},${y})`;
};<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body onload="loaded()">
<div id='layout'>
<div id='container'>
<svg id="graph" />
</div>
</div>
</body>
</html>