Accepted answer

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:,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:,output

Related Query

More Query from same tag