D3js chained animations as function of JSON - d3.js

Question

I am learning D3js and trying to chain some animations together.
Basically I have three svg elements that I want to simultaneously transition. There is a circle, a rectangle, and a text element.
For example, I am trying to make the circle transition from black to green, the rectangle transition from black to blue, and replace the text with a fade out, fade in effect.
I can do this one time, but I want a series of these animations to occur in sequence.
Here is the first fiddle of 1 transition working:
http://jsfiddle.net/mgcdanny/6nbRK/
Here is my attempt to sequence these using a for loop and JSON, but only the last transition happens:
http://jsfiddle.net/mgcdanny/U7StQ/
Perhaps this would be better as a series of enter(), update(), exit() commands?
Thanks for the help!
Fiddle 1 Code:
`
var svg = d3.select("body")
.append('svg')
.attr('width', 500)
.attr('height', 500)
var circle = d3.select("svg")
.append("circle")
.attr('cx', 10)
.attr('cy', 10)
.attr('r', 10)
var rect = d3.select("svg")
.append("rect")
.attr('width', 20)
.attr('height', 20)
.attr('x', 30)
.attr('y', 30)
var text = d3.select("svg")
.append("text")
.text("hello")
.attr("x",60)
.attr("y",60)
.attr('opacity',1)
var tran = svg.transition().duration(2000)
tran.select("rect").attr('fill', 'red')
tran.select("circle").attr('fill', 'blue')
tran.select("text").attr('opacity', 0)
//new transition
svg.transition()
.duration(2000)
.delay(2000)
.select("text")
.attr('opacity', 1)
.text("hello again!")
.attr("x",60)
.attr("y",60)
</script>
</body>
`
Fiddle 2 Code:
'
theData = [
{"words":"today", "rect_color": "red", "circle_color":"blue"},
{"words":"tomorrow", "rect_color": "green", "circle_color":"yellow"},
{"words":"Day After That", "rect_color": "purple", "circle_color":"brown"}]
var svg = d3.select("body")
.append('svg')
.attr('width', 500)
.attr('height', 500)
var circle = d3.select("svg")
.append("circle")
.attr('cx', 10)
.attr('cy', 10)
.attr('r', 10)
var rect = d3.select("svg")
.append("rect")
.attr('width', 20)
.attr('height', 20)
.attr('x', 30)
.attr('y', 30)
var text = d3.select("svg")
.append("text")
.text("hello")
.attr("x",60)
.attr("y",60)
.attr('opacity',1)
var tranFunc = function(object){
var tran = svg.transition().duration(2000)
tran.select("rect").attr('fill', object.rect_color)
tran.select("circle").attr('fill', object.circle_color)
tran.select("text").attr('opacity', 0)
var tran2 = tran
tran2.transition().select("text")
.attr('opacity', 1)
.text(object.words)
}
var allTran = function(list){
for(var i = 0; i < list.length; i++){
tranFunc(list[i])
}
}
allTran(theData)
</script>
'