stacking transforms in D3

Question

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.

Answer 1

I've actually been thinking that there should be a special function for this, similar to the way the classed() function handles adding and remove certain classes without messing up the other ones.

However, until that happens, just access the existing attribute and then concatenate strings:

selection.attr("transform", function(d){
        return this.getAttribute("transform") +
                     " translate(30) rotate(45 50 50)";
    });

You could also use d3.select(this).attr("transform") but the raw javascript should work and saves a function call.

Just be careful not to mix up attribute transforms with style transforms.

Answer 2

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())