31:[] 2f:{"title":"d3.interpolateTransformCss","cells":[{"id":0,"value":"# d3.interpolateTransformCss\n\nd3.interpolateTransformCss and d3.interpolateTransformSvg are interpolation methods specific to the “transform” property of [CSS](https://developer.mozilla.org/fr/docs/Web/CSS/transform) and [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform), respectively.","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"[d3.interpolateTransformCss](https://d3js.org/d3-interpolate/transform#interpolateTransformCss) returns a CSS transform interpolator. Given two transforms *a* and *b*, it interpolates between them. The transform properties are first converted to a standard representation of *translate*, *rotate*, *skewX* and *scale*. These component transformations are then interpolated. (This behavior is standardized by CSS: see [matrix decomposition for animation](http://www.w3.org/TR/css3-2d-transforms/#matrix-decomposition).)","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"{\n const interpolator = d3.interpolateTransformCss(\n \"translateY(12px) scale(2)\",\n \"translateX(30px) rotate(5deg)\"\n );\n return interpolator(0.5);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"{\n const interpolator = d3.interpolateTransformCss(\n \"matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)\",\n \"translate(3px,90px)\"\n );\n return interpolator(0.5);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"{\n const interpolator = d3.interpolateTransformCss(\n \"translateY(12px) scale(2)\",\n \"translateX(30px) rotate(5deg)\"\n );\n return interpolator(0.5);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"Let’s create a transform interpolator and a slider to control *t*:","pinned":false,"hidden":false,"mode":"md"},{"id":234,"value":"interpolatorCss = d3.interpolateTransformCss(\n \"scale(1)\", // no transform\n \"skewX(60deg) translateX(800px)\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"viewof t = Inputs.range([0, 1], { label: \"t\", step: 0.001 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"interpolatorCss(t)","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"

Hello, interpolate me!

","pinned":true,"hidden":false,"mode":"html"},{"id":246,"value":"[d3.interpolateTransformSvg](https://d3js.org/d3-interpolate/transform#interpolateTransformSvg) performs similar operations on SVG transforms — the only difference being that the initial value is evaluated in the SVG namespace, and lengths are returned without units. (Also, since SVG 2, the CSS interpolator can be used on SVG elements.)","pinned":false,"hidden":false,"mode":"md"},{"id":303,"value":"interpolatorSvg = d3.interpolateTransformSvg(\n \"skewX(-60)\",\n \"skewX(60) translate(280,0)\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"interpolatorSvg(t)","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"These interpolators are meant to accept various forms of the “transform” property, so that defining [transitions](https://d3js.org/d3-transition) on existing DOM elements works in all cases. But if you are in control of both the start and end transforms, with expressions that follow the same template, a simple [string interpolation](https://observablehq.com/@d3/d3-interpolatestring) might also give a correct result:","pinned":false,"hidden":false,"mode":"md"},{"id":364,"value":"{\n const interpolator = d3.interpolateString(\n \"translate(20, 40)\",\n \"translate(30, 60)\"\n );\n return interpolator(0.5);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"---\n\n## Appendix\n\nSee also the note in [D3 6.0 Migration guide](https://observablehq.com/@d3/d3v6-migration-guide#interpolateTransformCss).","pinned":false,"hidden":false,"mode":"md"},{"id":2,"value":"d3 = require(\"d3-interpolate@2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}