動畫圍繞頂點旋轉多邊形

Question

我試圖圍繞 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 並圍繞該點旋轉，它起作用了。 所以這些問題似乎與圍繞原點以外的東西旋轉有關？

Answer 1

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>

動畫圍繞頂點旋轉多邊形

問題描述

1 個解決方案

解決方案1
2 已采納 2023-01-02 00:54:55

動畫圍繞頂點旋轉多邊形

問題描述

1 個解決方案

解決方案1 2 已采納 2023-01-02 00:54:55

解決方案1
2 已采納 2023-01-02 00:54:55