This animation uses arcs instead of many short line segments with basis interpolation. The animation is done using the stroke-dasharray trick.

<!doctype html>
 
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Circle drawing animation in D3</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
.line {
    stroke: blue;
    stroke-width: 1.5px;
    fill: white;
}
</style>
 
</head>
<body>
 
<div id="chart">
<script language="javascript">

var svg = d3.select("body").append("svg").append("g").attr("transform", "translate(100,50)")

var data = [ {a: 0}, {a: Math.PI / 2}, {a: Math.PI}, {a: 3*Math.PI/2}, {a: 2*Math.PI}]

var radial = d3.svg.arc()
    .innerRadius(31)
    .outerRadius(31)
    .endAngle(function(d, i) { return data[(i+1) % data.length].a; })
    .startAngle(function(d, i) { return data[i].a; })

var path = svg.selectAll(".arc")
    .data(data)
    .enter()
    .append("path")
    .attr("class", "line")
    .attr("d", radial)
    .each(function(d, i) {
    
      var totalLength = this.getTotalLength();
  
      d3.select(this)
        .attr("stroke-dasharray", totalLength + " " + totalLength)
        .attr("stroke-dashoffset", totalLength)
        .transition()
          .duration(2000)
          .delay(1000 * i)
          .ease("linear")
          .attr("stroke-dashoffset", 0);
    })

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js