title: Transitioning a path more than once
body: <p>I'm having trouble trying to create a transition of groups. I've created an object from a path based on x and y data. I want this object to transition horizontally 5 times. I have 5 groups that will use the same object and transition. I'm trying to use a for loop so I don't have to rewrite that transition 5 times. You'll see in the snippet I have the groups group1, group2, etc., that are meant to use the same object. Is it possible to create an array of those groups that can be used for the transition? Hopefully this isn't confusing, and I'm using d3.v4. Thank you for taking a look at this.</p>
  
  <pre><code>var width = 900
  var height = 1200;
  
  var canvas = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height);
  
  // x and y coordinates of the path
  var objectArray = [{x: 51, y: 44}, 
          {x: 51, y: 49}, 
          {x: 53, y: 50}, 
          {x: 53, y: 53}, 
          {x: 52, y: 53}, 
          {x: 52, y: 60}, 
          {x: 70, y: 85}, 
          {x: 71, y: 160}, 
          {x: 64, y: 181}, 
          {x: 54, y: 181}, 
          {x: 47, y: 170}, 
          {x: 43, y: 170}, 
          {x: 36, y: 181}, 
          {x: 26, y: 181}, 
          {x: 19, y: 160}, 
          {x: 19, y: 85}, 
          {x: 39, y: 60}, 
          {x: 39, y: 53}, 
          {x: 38, y: 53}, 
          {x: 38, y: 50}, 
          {x: 40, y: 49}, 
          {x: 40, y: 44}, 
          {x: 51, y: 44}];
  
  var interpolate = d3.curveCardinal.tension(0.35);
  
  var objectOutline = d3.line()
    .x(function(d, i) { return d.x / 2.6 })
    .y(function(d, i) { return d.y / 2.2 })
    .curve(interpolate);
  
  
  // The 5 groups that use that same shapeArray for transition
  var group1 = canvas.append('g');
  var group2 = canvas.append('g');
  var group3 = canvas.append('g');
  var group4 = canvas.append('g');
  var group5 = canvas.append('g');
  
  
  // The group coordinates for start and end of transition
  var locationArray = [{x:1200, y:440, xTransition:250},
                   {x:1200, y:440, xTransition:278},
                   {x:1200, y:440, xTransition:306},
                   {x:1200, y:440, xTransition:334},
                   {x:1200, y:440, xTransition:362}];
  
   var length = locationArray.length;
  
   for (var i=0; i &lt; length; i++){
  
   // Right now the group1 group is being used for the path
   group1.selectAll('path')
      .data([objectArray])
      .enter()
      .append('path')
      .attr('d', objectOutline)
   group1.attr('transform','translate('+ locationArray[i].x + ','+ locationArray[i].y + ')')
      .transition()
      .duration((Math.random() * 3000) + 800)
      .delay(Math.random() * 3000)
      .attr('transform', 'translate(' + locationArray[i].xTransition + ',' + locationArray[i].y + ')');
  
   }
  </code></pre>