Commenters have pointed out that the principles for answering this question are consistent with your previous query. Here, you have a collection of disparate transitions that could be applied in any sequence and are denoted by various keys. Let's save them in an object:
var transitions = {
a: function(sel){ return sel.transition().duration(1000).delay(1000).attr('cy', 200) },
b: function(sel){ return sel.transition().duration(2000).delay(0).attr('r', 40) },
c: function(sel){ return sel.transition().duration(500).delay(1500).attr('fill', 'red') },
d: function(sel){ return sel.transition().duration(1500).delay(500).attr('opacity', 0.5) },
e: function(sel){ return sel.transition().duration(1000).delay(3000).attr('cy', 300) },
f: function(sel){ return sel.transition().duration(2000).delay(0).attr('r', 60) },
g: function(sel){ return sel.transition().duration(500).delay(1500).attr('fill', 'magenta') },
h: function(sel){ return sel.transition().duration(1500).delay(500).attr('opacity', 0.25) }
};
Each function is designed to take a d3.selection object and apply specific transition parameters along with sets of transformations to it. These functions can be as intricate as needed. In this version, the functions are kept simple with just one transformation due to my lack of creativity.
There's some redundancy in the code above, so we can streamline it by eliminating the selection conversion to a transition and using this instead of passing an argument:
var transitions = {
a: function(){ return this.duration(1000).delay(1000).attr('cy', 200) },
b: function(){ return this.duration(2000).delay(0).attr('r', 40) },
c: function(){ return this.duration(500).delay(1500).attr('fill', 'red') },
d: function(){ return this.duration(1500).delay(500).attr('opacity', 0.5) },
e: function(){ return this.duration(1000).delay(3000).attr('cy', 300) },
f: function(){ return this.duration(2000).delay(0).attr('r', 60) },
g: function(){ return this.duration(500).delay(1500).attr('fill', 'magenta') },
h: function(){ return this.duration(1500).delay(500).attr('opacity', 0.25) }
};
Now, these transitions can be executed by invoking code like
transitions['a'].call( selection.transition() )
transitions.f.call( d3.select('circle').transition() )
If you wish to specify an array of transitions to apply to a selection, you can do so with the following setup:
apply_transitions( group.select(":nth-child(1)"), ['a','b','c','d'] );
apply_transitions( group.select(":nth-child(2)"), ['e','f','g','h'] );
The implementation of this function would look like:
/**
* apply a series of transitions to a selection
*
* @param selection - d3 selection
* @param tr_arr - array of transition identifiers, referring to functions in the `transitions` object
*/
function apply_transitions( selection, tr_arr ) {
transitions[ tr_arr[0] ].call( selection.transition() )
.on('end', function(){
if ( tr_arr.length > 1 ) {
apply_transitions( d3.select(this), tr_arr.slice(1) );
}
})
}
Here's an example in action:
var svg = d3.select('svg').attr('width', 500).attr('height', 500);
var dataSet = [20, 20];
var group=svg.append("g");
var circles = group.selectAll('circle')
.data(dataSet)
.enter()
.append('circle')
.attr("r",function(d){ return d })
.attr("cx",function(d, i){ return i * 100 + 50 })
.attr("cy",50)
.attr("fill",'black');
apply_transitions( group.select(":nth-child(1)"), ['a','b','c','d'] );
apply_transitions( group.select(":nth-child(2)"), ['e','f','g','h'] );
<script src="http://d3js.org/d3.v5.js"></script>
<svg></svg>