堆积条形图过渡

【问题标题】：Stacked bar chart transition堆积条形图过渡
【发布时间】：2014-03-03 11:51:29
【问题描述】：

我正在尝试在水平堆叠条形图中一一获得条形过渡。但是每个酒吧都是同时开始的。

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

我怎样才能让它一个一个动画？谢谢！

jsFiddle

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

您就快到了——您需要使用.delay() 来实现这一点，就像您已经在做的那样。唯一的问题是您使用的是嵌套选择（即rects 在gs 中），而您获得的索引是内部选择的索引。这始终为 0，因为每个 g 只有一个 rect。

要使其工作，请在嵌套选择中引用秘密第三个参数，这是传递给父级的数据中的索引：

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

这将为您提供g 元素的索引。完整示例here。

【讨论】：