我想尝试使用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)"
- 请注意,它改变了第一个矩形的translate和rotate的顺序。
- 它还从旋转变换中删除了旋转中心(是否在过渡期间进行计算?)
- 它是如何得出结果数字的?
d3过渡效果是如何工作的?我需要得到一些可预期的结果,因为我正在尝试使用更高级的过渡效果。
以下是一个简单的例子:https://jsfiddle.net/pp6npw4g/2 (点击move启动过渡效果)
.attr('transform', (d) => transformFunction(d));
这样的操作,它只是将对transformFunction()
的调用包装到另一个匿名函数中。这基本上相当于.attr('transform', transformFunction);
,只是传递函数的引用。 - altocumulus