Performance issue: parseCss about d3-interpolate

[Karolusrex]

Turns out that there is a native API for doing this, working at least in latest Chrome, Safari, and Firefox. The window.DOMMatrix is a class for parsing these strings: https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix

According to the spec, the constructor will:

Parse transformList into parsedValue given the grammar for the CSS transform property. The result will be a , the keyword none, or failure. If parsedValue is failure, or any has values without absolute length units, or any keyword other than none is used, then return failure.

[mbostock]

Sorry for the slow response.

Unfortunately I’m not sure that DOMMatrix buys us anything: what interpolateTransform should be doing is interpolating a transform list rather than a single transform matrix; see #44. And while SVG provides a native SVGTransformList interface I don’t see that there’s a planned replacement for that will cover CSS as well.

Especially vexing is that getComputedStyle always returns the matrix(…) form for transforms, which means that there does not appear to be a way to get the current style as a transform list, and that means that it’s probably impossible to implement transform list interpolation for d3-transition, even if it’s supported in d3-interpolate.

[mbostock]

Though… if we abandon our goal of interpolating transform lists and instead continue to interpolate transform matrices, then adopting DOMMatrix (or WebKitCSSMatrix) to parse seems like a win.

[mbostock]

Untested branch here:

https://github.com/d3/d3-interpolate/tree/DOMMatrix

[Karolusrex]

Yes, exactly like that! That is very similar to the code I'm using as well.

Like this: Karolusrex/d3-interpolate@edfdaa6

I understand the value in interpolating values instead of interpolating the matrices they represent. Perhaps interpolating the transition as matrix could be left as an option, once the feature to interpolate the values inbetween as landed. In both cases, there is no need to un-performance it by modifying the DOM.

[Fil]

fixed in 372a62c