Geek Answers Handbook

Converting Stacks to D3

I have an SVG element with a transformation already applied to it (it can be a single translation or a combination of several transformations). I am trying to apply an extra transform to it. The problem is that this transformation can be applied multiple times and must be stacked with the existing state of the transformation (therefore, adding additional transformations to the end is impractical). Looking through the d3 API, I did not notice anything that allowed the relative conversion (although I must admit that I am not familiar with the advanced functions of d3). Manually parsing the row of the current transform, and then calculating the same transform matrix that SVG already does behind the scenes for free, seems silly, is there a better way?

For example, if an existing item already has the following attribute:

transform="translate(30) rotate(45 50 50)"

And I call this conversion logic twice, wanting to shift an element by 1 pixel each time in each dimension, I will need to analyze and process both translate and rotate calls, because new translations cannot be applied before the rotation.

+4
source share
2 answers

As Lars noted in a comment, d3.transform will generate a transform from a string. Applying this 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())
+2
source

, , , classed() , .

, , :

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

d3.select(this).attr("transform"), javascript .

, .

+4

More articles:


All Articles