[Solved]-D3.js v4 circle radius transition not working as expected-d3.js

var dataset = [2184,2184,3460,2610,2610,2452,842,1349,2430];

var myCounter = 0;
//svg dimensions
var h = 200;
var w = 200;

var svg = d3.select('body')
.append('svg')
.attrs({
  width: w,
  height: h
})
.classed('middle',true);
//color mapping
var colorsScale = d3.scaleLinear()
.domain([d3.min(dataset),d3.max(dataset)])
.range(['#FFB832','#C61C6F']);
//radius mapping
var rScale = d3.scaleLinear().domain([0, d3.max(dataset)]).range([0,50])
//labels
var label = svg.append("text").attrs({
  x: w/2,
  y: 20
}).text(function(){ return dataset[myCounter] });

//draw the circles
var circle = svg.append('circle')
.attrs({
    cx: w/2,
    cy: h/2,
    fill: function() { return colorsScale(dataset[myCounter]) },
    r: function() { return rScale(dataset[myCounter]) }
});
//button click
d3.select('#theButton')
  .on('click',function(){ 
  updateData()
});

function updateData(){
	myCounter++;
  if ( myCounter > dataset.length - 1 ) myCounter = 0;
  circle.transition().attr('r',function(){ return rScale(dataset[myCounter]) }).attr('fill', function() { return colorsScale(dataset[myCounter]) });
  label.text(function(){ return dataset[myCounter] });
};

html, body{
	height: 100%;
}

.middle{
	margin: 100px auto;
}

#theButton{
	position: absolute;
	left:50px;
	top:50px;
}

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
        
<button id="theButton" type="button">Click Me!</button>