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()来实现这一点，就像你已经做的那样。唯一的问题是你正在使用嵌套选择（即rect s内的g），你得到的索引是内部选择的索引。这始终为0，因为每rect只有一个g。

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

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

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

堆积条形图过渡

1 个答案: