I'm trying to play with d3 transitions - I need to do and translate and rotate. I have the source coordinates:
let data = [
{x: 100, y: 100, rotation: 45},
];
and 2 rectangles. One makes the translation first, the second - the rotation of the first.
This is the result of the conversion after drawing the rectangles:
transform="rotate(45 115 105) translate(100, 100)"
transform="translate(100, 100) rotate(45 115 105)"
they have the same translation and rotation of transformations, the only thing that differs from them is their order.
Then I modify the data:
data[0].x += 30;
data[0].y += 20;
data[0].rotation += 45;
and I would expect the transition with this conversion to complete as follows:
transform="rotate(90 145 125) translate(130, 120)"
transform="translate(130, 120) rotate(90 145 125)"
but I really get the following:
transform="translate(150, 110) rotate(90)"
transform="translate(400, 100) rotate(90)"
- Note that it changes the translation order to the first rectangle.
- it also removes the center of rotation from the rotation (does it somehow calculate it during the transition?)
- How to get totals?
d3? , .
: https://jsfiddle.net/pp6npw4g/2
( , )