Pie Chart

I still doubt whether it is a good idea that adding startAngle & endAngle attr at the end of ARC generator, because i read some pros didn't added and their routines work perfact.
attTween is my weakness and i don't get it right now.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .piepath:hover{ stroke: #05c8ff;stroke-width: 3; }
  </style>
</head>

<body>
  <div id='container'></div>
  <script>
    
var Width = 500, Height = 400, 
    innerRadius = 45, outerRadius = 120;
var colors = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6",
            "#7b6888", "#6b486b",
            "#a05d56", "#d0743c",
            "#ff8c00"]);

var svg = d3.select('#container')
    .append('svg')
    .attr({ width: Width, height: Height });

var data = [40, 32, 35, 64, 83],
    sum = d3.sum(data),
    percent = d3.format('.1%');

var pieData = d3.layout.pie()
    .sort(d3.ascending)(data);

var ArcGen = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)
    .padAngle(0.02)
    .startAngle(function(d){
        return d.startAngle;
    })
    .endAngle(function(d){
        return d.endAngle;
    });

var group = svg.append('g')
    .attr('transform', 'translate(' + [Width / 2.0, Height / 2.0] + ')');
var segment = group.selectAll('g')
    .data(pieData)
    .enter()
    .append('g')
    .attr('transform', 'translate(0,0)');

segment
    .append('path')
    .attr('d', ArcGen)
    .attr('class', 'piepath')
    .attr('fill', function(d,i){ return colors(i); })
    .on('mouseover', function(){
        d3.select(this.parentNode)
            .transition()
            .attr('transform', function(d){
                return 'translate(' +
                  [ArcGen.centroid(d)[0] * 0.1, ArcGen.centroid(d)[1] * 0.1] +
                  ')';
            })
    })
    .on('mouseout', function(){
        d3.select(this.parentNode)
            .transition()
            .duration(200)
            .attr('transform', null);
    });

segment
    .append('text')
    .text(function(d,i){ return percent(d.value / sum);})
    .attr('text-anchor', 'middle')
    // if chained with .attr('dy', -45), 
    // the text will moved to outside of circle
    // .attr('dy', -45)
    .attr('transform', function(d){
        return "translate(" + ArcGen.centroid(d) + ')' +
            'rotate(' + ((d.startAngle + d.endAngle) / 2) * 180 / Math.PI + ')';
    });
    
  </script>
</body>

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