d3/d3-interpolate

Why is skewY missing?

thednp opened this issue · 2 comments

I was wondering if I can learn something from your interpolation methods and I found skewY to be missing. I ask because I want to sharpen my scripting; I want to develop a unified methods to do HTML & SVG animation (if SVG do the transform attribute with the below codes, else do the HTML).

You know regular HTML elements do use skewY and I don't understand why you decided not to use it for D3 functions as well. D3 is above and beyond me and any other scripting there is for SVG, so I'm here to learn, I hope I can find some help here or in SO website.

As of now, we have in the decompose.js:

if (skewX = a * c + b * d) c -= a * skewX, d -= b * skewX;

As for skewX we have

skewX: Math.atan(skewX) * degrees,

similar for skewY

skewY: Math.tan(a) * degrees, // is this correct? it could according to https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY

In the index.js we have skewX

function skewX(a, b, s, q) {
  if (a !== b) {
    q.push({i: s.push(pop(s) + "skewX(", null, degParen) - 2, x: number(a, b)});
  } else if (b) {
    s.push(pop(s) + "skewX(" + b + degParen);
  }
}

Could this mean that skewY would look like this?

function skewY(a, b, s, q) {
  if (a !== b) {
    q.push({i: s.push(pop(s) + "skewY(", null, degParen) - 2, x: number(a, b)});
  } else if (b) {
    s.push(pop(s) + "skewY(" + b + degParen);
  }
}

Please, are the decomposition and interpolation functions correct for 'skewY' in the above?

If you want to learn about this stuff, I’d take a look at the CSS Transform specification (and perhaps Graphics Gems). The 2D matrix is decomposed into x- and y-translation, rotation, x-skew and x- and y-scale. The reason that y-skew is not part of that list is that it is redundant given that the decomposition already includes the other factors.

That said, this implementation was originally based on an earlier version of the specification for 3D transform interpolation, back when the specification did not provide as much detail for decomposing and interpolating 2D transforms (see d3/d3@e3f6f33). It looks like my implementation is slightly different than the specification for some edge cases, and it might be worth verifying consistent behavior. I’ll file a separate issue for that.

Thanks so much for your time to reply.