stacking transforms in D3
d3.js, javascript, svg
Solution
As Lars pointed out in a comment, d3.transform will generate the transform from the string. Applying that to my original problem, I can do the following:
element.attr('transform', d3.transform('translate(30) rotate(45 50 50) translate(1,1) translate(1,1)').toString())
Problem
I have an SVG element with a transform already applied to it (this could be a single translate, or a combination of multiple transforms). I'm trying to apply additional transform to it. Problem is that this transform could be applied repeatedly and needs to stack with the existing transform state (so appending additional transforms to the end is not practical). Looking through d3 API, I didn't notice anything that lets me apply a relative transform (although I must admit, I'm not that familiar with advanced features of d3). Manually parsing the current transform string and then computing the same transformation matrix that SVG already does behind the scenes for free seems silly, is there a better way? For example, if existing element already has the following attribute: ``` transform="translate(30) rotate(45 50 50)" ``` And I invoke this transformation logic twice, wanting to offset the element by 1 pixel in each dimension each time, I would need to parse and process both, the translate and rotate calls, because the new translations cannot be applied prior to rotation.