D3, transition groups (<g>)

d3.js, svg, transition

Solution

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");

Problem

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.

Original source