d3转换过渡中的旋转顺序 [英] d3 translate rotate order in transition

问题描述

我正在尝试使用d3过渡 - 我需要同时进行平移和旋转。
我有原始坐标：

I'm trying to play with d3 transitions - I need to do both translate and rotate. I have original coordinates:

let data = [
    {x: 100, y: 100, rotation: 45},
];

和2个矩形。一个是首先进行翻译，第二个是首先进行旋转
。

and 2 rectangles. One is doing translate first, second one is doing rotation first.

这是绘制矩形后产生的变换：

This is resulting transform after drawing rectangles:

transform="rotate(45 115 105) translate(100, 100)"
transform="translate(100, 100) rotate(45 115 105)"

它们具有相同的平移和旋转变换，只有不同的是它们的顺序。

they have the same translate and rotate transformations, only thing which differs is order of them.

然后我更改数据：

data[0].x += 30;
data[0].y += 20;
data[0].rotation += 45;

我希望通过这种转变得到一些转变：

and I would expect to get some transition ending up with this transformation:

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旋转顺序。


• 它还会从旋转变换中移除旋转中心（它是否会在过渡期间以某种方式计算它？）


• 如何获得结果数字？



d3过渡如何运作？我需要得到一些可预期的结果，因为我正在尝试使用一些更高级的过渡。

How does the d3 transition work? I need to get some expectable result, since I'm trying to play with some more advanced transitions.

这是一个简单的例子： https://jsfiddle.net/pp6npw4g/2
（点击移动开始转换）

Here is simple example: https://jsfiddle.net/pp6npw4g/2 (click move to start transition)

推荐答案

这是D3标准插值转换属性值的预期行为。众所周知，转换属性很难转换，因为它的值可能包含一个复杂的转换定义列表，它可能以任何顺序出现，甚至可能在一个列表中出现多次。例如：

This is the expected behaviour for D3's standard interpolation of the transform attribute's value. The transform attribute is notoriously hard to transition because its value may contain a complex list of transform definitions, which may come in any order and may even appear multiple times within one list. For example:

transform="translate(100) rotate(30, 100, 100) scale(2.5) translate(-10, -50) skewX(20)"

为了能够在这些值之间转换， transition.attr（） 功能用途 d3.interpolateTransformSvg（a，b） 在内插转换属性的值时。这样做如下：

To be able to transition between these values, the transition.attr() function uses d3.interpolateTransformSvg(a, b) when it comes to interpolating transform attributes' values. This does the following:




1. 在内部函数中 parseSvg（） 模块d3-通过调用 .consolidate（）来简化转换定义列表。 / Web / API / SVGTransformListrel =nofollow noreferrer> SVGTransformList 。

1. Within the internal function parseSvg() of module d3-interpolate the list of transform definitions is boiled down by calling .consolidate() of interface SVGTransformList.

使用私人功能 分解（） 然后将此合并转换分解为 translate ， rotate ， skew 的值 scale 。

Using the private function decompose() this consolidated transform is then decomposed into its values for translate, rotate, skew and scale.

我已经描述了在回答 在D3 v4中替换d3.transform 。

I have described this process of decomposing the transform list in my answer to "Replacing d3.transform in D3 v4".

在转换过程中，插补器返回通过 d3.interpolateTransformSvg（a，b）然后将在 a 和 b for（1） translate ，（2） rotate ，（3） skewX 和（4） scale 正是这个 order 。

During the transition the interpolator returned by d3.interpolateTransformSvg(a, b) will then interpolate between the respective values of a and b for (1) translate, (2) rotate, (3) skewX and (4) scale in exactly this order.

这离开了你合并后的价值，最初可能会出乎意料。此外，它解释了为什么转换的顺序因转换而改变。要解决此问题并实现自定义转换，您必须提供自定义补间函数，该函数可通过调用 transition.attrTween（） 。但是，这个功能的实现很大程度上取决于你的需求，超出了这个答案的范围。

This leaves you with consolidated values, which may, at first, seem to come unexpected. Furthermore, it explains, why the order of transformations was changed by the transition. To work around this and implement a custom transition, you will have to provide a custom tween function which may be assigned by calling transition.attrTween(). The implementation of this function largely depends on your needs, though, and is beyond the scope of this answer.

这篇关于d3转换过渡中的旋转顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！