D3.js，rect的组，动画单个元素（转换/转换？）

Question

我在使用svg＆d;和D3.js时非常新，我有以下代码：

var board = d3.select('.board')
            .append('svg')
            .attr('width', '100%')
            .attr('height', '100%');

var barsGroup = board.append('g').attr('id', 'barsGroup')
            .selectAll('rect')
            .data($scope.bars)
            .enter()
                .append('rect')
                .attr('width', function(data) {return data.width})
                .attr('height', function(data) {return data.height})
                .attr('x', function(data) {return data.x})
                .attr('y', function(data) {return data.y})
                .style({fill: '#547EEA'});

$scope.myFunction = function() 
    window.setInterval( function() {
        x = Math.floor(Math.random() * 280);
        barsGroup.transition().attr('height', x).attr('y', 280-x);
    }, 300);
};

首先，我想创建一组rects，并将它们全部设置为动画，改变它们的高度，并且它可以通过transition（）方法正常工作。但是现在我试图单独动画它们，一个接一个地随机化一个数字，设置单个条形的高度并移动到下一个。

我尝试了多种方式，比如barsGroup.each（），barsGroup.selectAll（＆＃39; rects＆＃39;）。每个（）一个对我来说没什么用，有人可以给我一个提示或帮助溶液