переход цикла d3 конечное число раз

Question

Я создаю серию кругов, и я хотел бы изменить их радиусы конечное число раз.Это код, который первоначально рисует круги:

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] );

Все примеры и сообщения, описывающие стекопоток, которые я мог найти о связывании переходов, либо связывают заранее определенное количество переходов, либо выполняют бесконечный цикл.Мне нужно иметь возможность использовать один и тот же код для динамического числа циклов, поэтому я пробовал цикл for:

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]} );
  }
}

Но переход происходит только один раз.Он не повторяется, как предполагалось.

Answer 1

Вам нужно связать переходы

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