Multiple transformations on the same object?

[Base]

Hi All -

Is it possible to apply multiple transformations on the same item?  when I add more than one, only the last one is applied:

var svg = d3.select("body").append("svg");

svg.selectAll("rect")

     .data([1])

 .enter()

 .append("g")

 .append("svg:rect")

 .attr({x: 50, y: 80, height: 100, width: 300, fill: "#000", stroke: "none"})

 .attr("transform", "scale(2)")  

 .attr("transform", "translate(200,200)")

In the example above, the position is shifted but not the scale.  When I reverse them the scale is doubled but the position is not affected:

svg.selectAll("rect")

      .data([1])

  .enter()

  .append("g")

  .append("svg:rect")

  .attr({x: 50, y: 80, height: 100, width: 300, fill: "#000", stroke: "none"})   

  .attr("transform", "translate(200,200)")

  .attr("transform", "scale(2)")

and this does nothing at all

svg.selectAll("rect")

     .data([1])

 .enter()

 .append("g")

 .append("svg:rect")

 .attr({x: 50, y: 80, height: 100, width: 300, fill: "#000", stroke: "none"})

 .attr("transform", "scale(2);translate(200,200);")

Any idea on this?

Thanks!

[Tore Nauta]

In the first two versions you are simply overwriting the first "transform" attribute by the second attribute you specify. Therefore, your last version is the correct approach.

However you must not use semi-colons to separate the individual transform definitions. See the SVG spec: http://www.w3.org/TR/SVG/coords.html#TransformAttribute

The value of the ‘transform’ attribute is a <transform-list>, which is defined as a list of transform definitions, which are applied in the order provided. The individual transform definitions are separated by whitespace and/or a comma.

[Bassel Abul-Hajj]

Excellent!  Thanks so much!