Svg text element being overlapped by another svg element

Question

I'm building a pie chart at the moment, and it's mostly done.

Anyway, I'm trying to implement some hover effects on each pie slice, but I've come across a problem I'm unable to solve. When you hover over an element the text increases in size, and also uses a filter to add a black background. The issue with this is that the text is sometimes being hidden behind other elements, as if those elements are on top of it. My best solution to fix this was adding visibility and making it !important.

.pieChart svg>g text.hover {
  font-size: 1.3em;
  fill: #fff;
  filter: url(#pieTextFilter);
  visibility: visible !important;
}

This, however, doesn't solve my problem.

Here is a jsfiddle that represents the problem (hover you mouse of slice 4): http://jsfiddle.net/tinygram/22o1epyp/3/

If you're familiar with D3, it might be important to note that this happens only after I update the graph. If you look at the bottom of my jsfiddle, you'll see that I'm starting the graph and then running it again with some updated data. I have noticed that this adds a new and at the end of the svg in the dom. I honestly don't know if this is important, but I thought I should mention it.

Answer 1

As @LarsKotthoff mentions in his comment, it's all in the order. You initially build a pie chart with 4 slices, you then add a 5th slice. So the enter selection first adds 4 slices and 4 labels. On the addition of the 5th slice, it updates the first 4 slices/labels and enters a 5th slice/label. This addition of a 5th slice is then on top of the 4th label.

See this fiddle. The problem goes away because I've invoked the exit:

tests(data);
tests({});
tests(data2);

A better fix might just be to remove all the texts before update:

tests(data);
d3.selectAll('text').remove();
tests(data2);