Comments (6)
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.
from d3-interpolate.
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.
from d3-interpolate.
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.
from d3-interpolate.
Untested branch here:
https://github.com/d3/d3-interpolate/tree/DOMMatrix
from d3-interpolate.
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.
from d3-interpolate.
fixed in 372a62c
from d3-interpolate.
Related Issues (20)
- Images in readme not loading due to Content Security Policy
- Simple zoom-in with interpolateZoom gives negative duration
- Interpolated data spike value problem HOT 1
- d3-color vulnerable to ReDoS HOT 1
- d3-color dependency update due to ReDoS HOT 1
- d3-color version issue HOT 2
- [bug] require() of ES modules is not supported HOT 1
- NaN RGB values if passing zero to interpolateRgb
- Meteor app crashes HOT 1
- d3-color version issue
- interpolateBalanced? HOT 3
- d3.piecewise(values)?
- Non-uniform d3.interpolateRgbBasis HOT 2
- array.js sometimes reports errors HOT 1
- Catmull-Rom interpolator? HOT 1
- Interpolate with t=Infinity returns NaN instead of Infinity HOT 6
- d3.interpolateHcl(a,b)(1) doesn't return 'b' HOT 3
- 3.0.1 doesn't work with Jest HOT 10
- Require Cycle with object.js and value.js HOT 1
- Require cycle: `value.js` -> `object.js` -> `value.js` HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from d3-interpolate.