CODEWITHSUNDEEP
d3.jssvgtransition
Steekatsee
Steekatsee

Reputation: 319

D3, transition groups (<g>)

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.

Upvotes: 10

Views: 4480

Answers (1)

Josh
Josh

Reputation: 5480

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

Upvotes: 14

Related Questions