score:1

Accepted answer

You need to chain the transitions

var nodes = [
  {x:50, y:50, color:"red", total:25},
  {x:125, y:25, color:"green", total:20},
  {x:100, y:75, color:"blue", total:10}
];

var svg = d3.select('#chart');
svg.append('g')
  .attr('class', 'nodes')
  .selectAll('circle')
  .data( nodes )
  .enter().append('circle')
  .attr('class', 'node-deals' )
  .attr('cx', d => d.x)
  .attr('cy', d => d.y )
  .attr('r', d => d.total )
  .attr('fill', d => d.color );

var dealsArray = [40, 10, 50, 5, 25];
var animation = svg.selectAll('circle.node-deals')
    .transition()
    .duration(250); // wait 250+750ms before animation

for (let j = 0; j < dealsArray.length; j++ ) {
  animation = animation.transition()
    .duration(750)
    .delay(750)
    .attr('r', d => dealsArray[j] );
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg id="chart" width="500" height="500"/>


Related Query

More Query from same tag