d3.js not updating graph with new data - d3.js

Question

I am trying to update d3.js based graph with some random data after each 3 seconds, but it only renders the data first time. Here is the code
function drawGraph(data) {
var areaWidth = 200;
var areaHeight = 200;
var gdpData = data;
var leftMargin = 10;
var rightMargin = 10;
var maxGDP = Math.max.apply(Math, gdpData);
var myScale = d3.scaleLinear()
.domain([0, maxGDP])
.range([0, areaWidth - leftMargin - rightMargin]);
var spacing = areaHeight/(gdpData.length+3);
var fda = d3.select('#fun-drawing-area');
var recs = fda.selectAll('rect')
.data(gdpData);
recs.exit().remove();
recs.enter()
.append('rect')
.attr('y', function(d, i) {
return spacing * (i+1);
})
.attr('x', '10')
.attr('width', function(d, i) {
return myScale(d);
})
.attr('height', '20')
.style({
fill: 'steelblue',
stroke: 'black',
'stroke-width': 1
});
}
setInterval(function() {
var arr = [];
for (var i=0, t=5; i<t; i++) {
arr.push(Math.round(Math.random() * t))
}
console.log(arr);
drawGraph(arr);
}, 3000);
here is the plunkr https://plnkr.co/edit/OfFABbrZ6Teet6atLQD0?p=preview

Answer 1

In the new D3 4.x, you have to merge the selections:
recs.enter()
.append('rect')
.merge(recs)
.attr('y', function(d, i) {
return spacing * (i+1);
})
.attr('x', '10')
.attr('width', function(d, i) {
return myScale(d);
})
.attr('height', '20')
.style({
fill: 'steelblue',
stroke: 'black',
'stroke-width': 1
});
Here's your plunker: https://plnkr.co/edit/kaFCLcUKNqSiJkpOCHvS?p=preview
PS: I changed setTimeout to setInterval.