D3, transition groups (<g>)

Question

In D3 is it possible to transition groups?

With square or circles it works this way:

mySquare
  .transition()
  .attr("x",320);

but if mySquare is for example a reference to a group ("< g >") it doesn't work, maybe because D3 looks for an x property of the group I was not able to retrieve.

Can you help me? I couldn't find any docs about this topic.

Answer 1

Since the x attribute is not valid for an svg g element, transitioning it will not work as intended. You can, however, transition the transform attribute to transition the position of a group of elements, or transition styles that cascade to it's children.

i.e.:

myGroup.transition()
    .attr("transform", "translate(320, 0)")
    .style("fill", "red");