an experiment in simple transitions
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<svg width=960 height=500 style="background-color:#d1fdff">
</svg>
<script>
var data = [ 1, 2, 3, 4, 5 ];
var svg = d3.select("svg");
var circles = svg.selectAll("circle").data(data)
circles.enter()
.append("circle")
.attr({
r: 10,
cx: function(d,i) { return 100 + i * 168 },
cy: 200,
fill: "#ff6d05"
})
function transition() {
circles.transition()
.ease("sin")
.duration(800)
.delay(function(d,i) { return i * 100 })
.attr({ r: 20 })
.each("end", function() {
circles.transition()
.ease("sin")
.duration(600)
.delay(function(d,i) { return i * 100 })
.attr({r: 10 })
.each("end", function() {
transition();
})
})
}
transition()
</script>
</body>