CODEWITHSUNDEEP
javascriptd3.js
Preethi
Preethi

Reputation: 339

Stacked bar chart transition

I'm trying to get the bar transition one by one in the horizontal stacked bar chart. But each bar is starting at the same time. 

rects = groups.selectAll('stackedBar')
  .data(function(d,i) {
    console.log("data", d, i);
    return d;
  })
  .enter()
  .append('rect')
    .attr('class','stackedBar')
    .attr('x', function(d) { return xScale(d.x0); })
    .attr('y', function(d, i) {return yScale(d.y); })
    .attr('height', function(d) { return yScale.rangeBand(); })
    .attr('width', 0)
      .transition()
      .delay(function(d, i){
        console.log('hi', d, i);
        return i * 500;
      })
      .attr("width", function(d) { return xScale(d.x); })
      .attr("x", function(d) { return xScale(d.x0); })
      .duration(1000);

How can i make it animate one by one? Thanks!

jsFiddle

Upvotes: 0

Views: 508

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

You're almost there -- you need to use .delay() to achieve this, as you're doing already. The only problem is that you're using a nested selection (i.e. rects within gs) and the index you get is that of the inner selection. This is always 0 because there's only one rect per g.

To make it work, reference the secret third argument in a nested selection, which is the index within the data passed to the parent:

.delay(function(d,i,j){console.log('hi',d,j); return j*500;})

This will give you the index of the g element. Complete example here.

Upvotes: 2

Related Questions