4

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},
];

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.

Then I change data:

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)"

but what I really get is this:

transform="translate(150, 110) rotate(90)"
transform="translate(400, 100) rotate(90)"
  • notice it changes order of translate rotate for the first rectangle.
  • it also removes the center of rotation from rotate transformation (does it somehow compute it during transition?)
  • how does it get the resulting numbers?

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

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

Klinki
  • 1,399
  • 3
  • 15
  • 33
  • Not related to your actual problem, but just for brevity, clarity and to get any possible source of error out of the way: In your JSFiddle you are doing `.attr('transform', (d) => transformFunction(d));`, which just wraps the call to `transformFunction()` into yet another anonymous function. This is basically equivalent to `.attr('transform', transformFunction);` just passing in the reference to the function. – altocumulus Dec 31 '16 at 11:37
  • I know, it is just an example. In real application I do more stuff there, not just one function call. But you are right, in this example it could be simplified. – Klinki Dec 31 '16 at 11:39
  • Never mind! It's just that many people get confused about that. Kudos for keeping it simple and providing a stripped down example instead of just dumping your entire code! – altocumulus Dec 31 '16 at 11:41
  • Since you are rotating around a center other than the origin, you need to implement a custom tween function. Have a look at my [answer](http://stackoverflow.com/a/40245163/4235784) to [*"D3 SVG transform rotation transition behaving weirdly"*](/q/40244530) for further details. – altocumulus Dec 31 '16 at 11:56

1 Answers1

2

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)"

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. Within the internal function parseSvg() of module d3-interpolate the list of transform definitions is boiled down by calling .consolidate() of interface SVGTransformList.

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

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

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.

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.

Community
  • 1
  • 1
altocumulus
  • 21,179
  • 13
  • 61
  • 84