Slice and bounce effect not working properly in pie chart - d3.js

Question

As per below code I am expecting bounce effect when the pie chart loads for the first time which do not work as expected and expand the arc slice when on mouseenter but slicing the selected arc overlaps the adjacent arcs while it should work as red arc as in the below example it should only expand and displace other arcs. Can any give pointer on where exactly I am doing wrong.
Pie Chart
var width = 960,
height = 500,
radius = Math.min(width, height) / 2 - 10;
var data=[
{
"age": "<5",
"population": 2704659
},
{
"age": "5-13",
"population": 4499890
},
{
"age": "14-17",
"population": 2159981
},
{
"age": "18-24",
"population": 3853788
},
{
"age": "25-44",
"population": 14106543
},
{
"age": "45-64",
"population": 8819342
},
{
"age": "≥65",
"population": 612463
}
];
var color = d3.scale.category20();
var arc = d3.svg.arc()
.outerRadius(radius);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.population; });
var labelArc = d3.svg.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
var svg = d3.select("body").append("svg")
.datum(data)
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var arcs = svg.selectAll("g.arc")
.data(pie)
.enter().append("g")
.attr("class", "arc");
arcs.append("path")
.attr("fill", function(d, i) { return color(i); }).on("mouseenter", function(d) {
var endAngle = d.endAngle + 0.2;
var startAngle = d.startAngle - 0.2;
var arcOver = d3.svg.arc()
.outerRadius(radius + 10).endAngle(endAngle).startAngle(startAngle);
d3.select(this)
.attr("stroke","white")
.transition()
.ease("bounce")
.duration(1000)
.attr("d", arcOver)
.attr("stroke-width",6);
})
.on("mouseleave", function(d) {
d3.select(this).transition()
.attr("d", arc)
.attr("stroke","none");
})
.transition()
.ease("bounce")
.duration(2000)
.attrTween("d", tweenPie).attr("d", arc);
function tweenPie(b) {
b.innerRadius = 0;
var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
return function(t) { return arc(i(t)); };
}
arcs.append("text")
.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
.attr("dy", ".35em")
.text(function(d) { return d.data.age; });
function type(d) {
d.population = +d.population;
return d;
}
</script>
Here is the bin of what I have tried so far.

Answer 1

The arcs overlap because of the order they were appended in the SVG. As you know, the SVG order defines what element goes over its siblings. So, when you expand the hovered arc (using the new startAngle and endAngle), the arc expands under a sibling that sits on top of it in the SVG order.
One solution is sorting the elements inside the mouseenter function, in such a way that the hovered element is the first one in the SVG order. This is the function:
svg.selectAll("path").sort(function (a, b) {
if (a != d) return -1;
else return 1;
});
The element that you hovered is the d, and a is the first one. Using this function, all the paths are sorted when you hover over them.
This is the Bin: http://jsbin.com/hotifepiko/1/edit?html,output
PS: This other Bin solves the problem of the disappearing texts (because of the sort function). I just created new groups for the texts: http://jsbin.com/mifejasiyo/1/edit?html,output