title: Filter selection by array without losing order d3js
body: <p>I'm newbie in d3js and I want to create an animation between two nodes in a graph represented by circles.</p>
  
  <p>I have calculated the shortest path between start and end nodes using the function path. It returns an array of circle's ids that represent the path that you must follow from source (start) to target(end). 
  Something like this: 23, 24, 37, 29, 30.</p>
  
  <pre><code>var ruta = path(data.pred, start, end);
  </code></pre>
  
  <p>After that I used the filter function to select the nodes (circles) that forms the shortest path between start and end.</p>
  
  <pre><code>var selection = svg.selectAll('circle').filter(function(d){ return ruta.indexOf(d.index.toString()) &gt;- 1;});
  </code></pre>
  
  <p>Then, I tried to animate the path using this simple transition, changing the size of circles one by one.</p>
  
  <pre><code>                       selection.transition()
                                  .delay(function(d,i) { return i/ len * enter_duration;})
                                  .style("opacity",1.0)
                                  .attr("r", 10.0)
                                  .each("end",function() { 
                                      d3.select(this).       
                                          transition()
                                          .delay(function(d,i) { return i/ len * enter_duration;})
                                          .attr("r",7)
                                          .style("opacity",0.7);            
                                  });
  </code></pre>
  
  <p>The problem is that the filter selection losses the original order of nodes.</p>
  
  <p>Example:</p>
  
  <p>Original path: 23, 24, 37, 29, 30.
  Selection order: 23, 24, <strong>29, 30, 37.</strong></p>
  
  <p>How can I reorder the selection objects based on the original array?</p>