31:T596,parseTransformValues = function parseTransformValues(transform) { // Create a dummy g for calculation purposes only. This will never // be appended to the DOM and will be discarded once this function // returns. var g = document.createElementNS("http://www.w3.org/2000/svg", "g"); // Set the transform attribute to the provided string value. g.setAttributeNS(null, "transform", transform); // consolidate the SVGTransformList containing all transformations // to a single SVGTransform of type SVG_TRANSFORM_MATRIX and get // its SVGMatrix. var matrix = g.transform.baseVal.consolidate().matrix; // Below calculations are taken and adapted from the private function // transform/decompose.js of D3's module d3-interpolate. var {a, b, c, d, e, f} = matrix; // ES6, if this doesn't work, use below assignment // var a=matrix.a, b=matrix.b, c=matrix.c, d=matrix.d, e=matrix.e, f=matrix.f; // ES5 var scaleX, scaleY, skewX; if (scaleX = Math.sqrt(a * a + b * b)) a /= scaleX, b /= scaleX; if (skewX = a * c + b * d) c -= a * skewX, d -= b * skewX; if (scaleY = Math.sqrt(c * c + d * d)) c /= scaleY, d /= scaleY, skewX /= scaleY; if (a * d < b * c) a = -a, b = -b, skewX = -skewX, scaleX = -scaleX; return { translateX: e, translateY: f, rotate: Math.atan2(b, a) * 180 / Math.PI, skewX: Math.atan(skewX) * 180 / Math.PI, scaleX: scaleX, scaleY: scaleY }; }32:[] 2f:{"title":"Getting transform values from string","cells":[{"id":0,"value":"md`# Getting transform values from string`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`\nWhen using d3 sometimes we need to get transform values of current element\n\nConsider simple rect\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"html `\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`\nlet's translate\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"html `\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`\n scale\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"html `\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`\n rotate\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"html `\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"md`\nNow we wan't to get those transform values , but what we get back is simple string , which we can't differentiate\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"transformValues = rect.attr('transform')","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`\nalthough, using parseTransformValues func, we can parse it\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"parsed = parseTransformValues(transformValues)","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"md`\n#### implementation details\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":" rect = d3.select('#lastRect')","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}