Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Why is skewY missing? #27

Closed
thednp opened this issue Aug 27, 2016 · 2 comments
Closed

Why is skewY missing? #27

thednp opened this issue Aug 27, 2016 · 2 comments

Comments

@thednp
Copy link

thednp commented Aug 27, 2016

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?

@mbostock
Copy link
Member

mbostock commented Aug 27, 2016

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.

@thednp
Copy link
Author

thednp commented Aug 27, 2016

Thanks so much for your time to reply.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

2 participants