我正在嘗試使用d3轉換 - 我需要翻譯和旋轉。 我有原始座標:d3翻譯轉換中的轉換順序
let data = [
{x: 100, y: 100, rotation: 45},
];
和2個矩形。一個是先做翻譯,二是先做旋轉 。
這導致繪製矩形後變換:
transform="rotate(45 115 105) translate(100, 100)"
transform="translate(100, 100) rotate(45 115 105)"
它們具有相同的平移和旋轉變換,只有不同的是它們的順序。
然後我改變數據:
data[0].x += 30;
data[0].y += 20;
data[0].rotation += 45;
和我希望得到一些過渡結束了這種轉變:
transform="rotate(90 145 125) translate(130, 120)"
transform="translate(130, 120) rotate(90 145 125)"
但是我真正得到的是這樣的:
transform="translate(150, 110) rotate(90)"
transform="translate(400, 100) rotate(90)"
- 注意它會改變翻譯的順序旋轉第一個矩形。
- 它也將旋轉中心從旋轉變換中移除(是否以某種方式在過渡期間計算它?)
- 它是如何得到結果數字的?
d3過渡如何工作?我需要得到一些預期的結果,因爲我正在嘗試進行一些更高級的轉換。
下面是簡單的例子:https://jsfiddle.net/pp6npw4g/2 (點擊移動開始轉變)
與您的實際問題沒有關係,但僅僅爲了簡潔明瞭,並且避免了任何可能的錯誤來源:在JSFiddle中,您正在執行'.attr('transform',(d)=> transformFunction d));',它將對'transformFunction()'的調用包裝成另一個匿名函數。這基本上等同於'.attr('transform',transformFunction);'只是傳遞函數的引用。 – altocumulus
我知道,這只是一個例子。在實際應用中,我在那裏做了更多的事情,而不僅僅是一個函數調用但是你是對的,在這個例子中它可以被簡化。 – Klinki
沒關係!只是很多人對此感到困惑。榮譽保持簡單,並提供一個精簡的例子,而不是隻是傾銷你的整個代碼! – altocumulus