score:3

As mentioned by echonax, the issue is you're creating multiple circles based on the dataset. To get the smooth transition, draw only one circle, and update the radius based on 'myCounter'. An example:

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>

Based on your data, there are a couple of times that the circle won't change as the data is the same, but the transition should work when it does.


Related Query