Question

我有一个堆积的条形图，我想为堆积的条形图制作动画。我正在使用d3js v5。

我的项目位于https://stackblitz.com/edit/angular-2xgkwr

https://angular-2xgkwr.stackblitz.io

我喜欢的动画是长成的酒吧，如下所示https://bl.ocks.org/guilhermesimoes/8913c15adf7dd2cab53a 非常感谢您能提供帮助

Answer 1

我刚刚更新了代码，它开始起作用

 g.append('g')
              .selectAll('g')
              .data(d3.stack().keys(keys)(data))
              .enter().append('g')
              // tslint:disable-next-line:only-arrow-functions
              .attr('class', d => z(d.key))
              .selectAll('rect')
                  .data(d => d )
                  .enter().append('rect')
                  .attr('x', d =>
                     x(new Date(d.data.dateRange))
                    )
                  .attr("height", 0)
                  .attr('height', function(d) { return y(d[0]) - y(d[1]); })
                  .transition().duration(750).delay(calculateDelayFn)
                  .attr('y', function(d) {
                    return y(d[1]); }
                    )

无法在d3js的堆叠条形图中添加动画？

1 个答案: