CODEWITHSUNDEEP
javascriptanimationd3.js
interwebjill
interwebjill

Reputation: 950

loop d3 transition a finite number of times

I am creating a series of circles and I would like to transition their radii a finite number of times. This is the code that initially draws the circles:

this.node = this.svg.append('g')
  .attr('class', 'nodes')
  .selectAll('circle')
  .data( self.nodesArray )
  .enter().append('circle')
  .attr('class', 'node-deals' )
  .attr('cx', d => d.x)
  .attr('cy', d => d.y )
  .attr('r', (d, i) => self.totalDealsArray[i] )
  .attr('fill', (d, i) => self.nodeColor[i] );

All of the examples and stackoverflow posts I could find about chaining transitions either chain a predetermined number of transitions or loop infinitely. I need to be able to use the same code for a dynamic number of loops, so I have been trying a for loop:

update() {
  self = this;

  var t = d3.transition()
    .duration(750)
    .delay(750);

  var nodeAnimation = svg.selectAll('circle.node-deals')
    .data(self.dealsArray);

  for (let j = 0; j < this.dealsArray.length; j++ ) {
    nodeAnimation
      .transition(t)
      .attr('r', (d) => {
        return self.dealsArray[j]} );
  }
}

But the transition only happens once. It does not repeat as intended.

Upvotes: 0

Views: 282

Answers (1)

rioV8
rioV8

Reputation: 28633

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"/>

Upvotes: 1

Related Questions