javascript - 堆积条形图过渡

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

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

最佳答案

您快要准备就绪了-您已经在执行操作，因此需要使用.delay()来实现。唯一的问题是您使用的是嵌套选择（即rect中的g），而获得的索引是内部选择的索引。始终为0，因为每个rect只有一个g。

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

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

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

关于javascript - 堆积条形图过渡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22146039/