javascript - 堆积条形图过渡

Question

我正在尝试在水平堆叠条形图中一一获取条形过渡。但每个小节同时开始。

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

Answer 1

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

要使其正常工作，请在嵌套选择中引用 secret 的第三个参数，它是传递给父级的数据中的索引:

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

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