D3.js标签在彼此之上

Question

我正在使用D3.js制作圆环图。我把它做得很好，只是当每个部分的标签变得更小时，每个部分的标签都被绘制在一起。您可以在下面的屏幕截图中看到这一点。

Screenshot of the issue

我无法弄清楚如何获得更多间距或将标签翻转到另一侧。

以下是相关代码。

var slice = chart.select(".slices").selectAll("path.slice").data(pie(data), key);

                    slice.enter()
                        .insert("path")
                        .style("fill", function(d,i) {return color(i);})
                        .attr("class", "slice")
                        .attr("data-label", function(d){ return d.data.label();})
                        .attr("data-value", function(d){ return d.data.value();});

                    slice.transition().ease("exp").duration(animationTime * 2)
                            .attrTween("d", function(d){                                        
                                    var interpolater = d3.interpolate({startAngle: 2*Math.PI, endAngle: 2*Math.PI}, d);
                                    return function(t) {
                                        return arc(interpolater(t));
                                    }
                            })
                    slice.exit().remove();


                    var text = chart.select(".labels").selectAll("text")
                        .data(pie(data), key);

                    text.enter()
                        .append("text")
                        .attr("dy", ".35em")
                        .style("font-size", "11pt")
                        .style("fill", "#8FA1A9")
                        .text(function(d) {
                            if(d.data.value() != 0){
                                return d.data.label();
                            }
                            else{
                                return "";
                            }
                        });

                    function midAngle(d){
                        return d.startAngle + (d.endAngle - d.startAngle)/2;
                    }

                    text.transition().duration(500)
                        .attrTween("transform", function(d) {
                            this._current = this._current || d;
                            var interpolate = d3.interpolate(this._current, d);
                            this._current = interpolate(0);
                            return function(t) {
                                var d2 = interpolate(t);
                                var pos = outerArc.centroid(d2);
                                pos[0] = radius * 0.75 * (midAngle(d2) < Math.PI ? 1 : -1);
                                return "translate("+ pos +")";
                            };
                        })
                        .styleTween("text-anchor", function(d){
                            this._current = this._current || d;
                            var interpolate = d3.interpolate(this._current, d);
                            this._current = interpolate(0);
                            return function(t) {
                                var d2 = interpolate(t);
                                return midAngle(d2) < Math.PI ? "start":"end";
                            };
                        });

                    text.exit().remove();


                    var polyline = chart.select(".lines").selectAll("polyline")
                        .data(pie(data), key);

                    polyline.enter()
                        .append("polyline")
                        .style("fill", "none")
                        .style("stroke-width", "2px")
                        .style("stroke", "#8FA1A9")
                        .style("opacity", "0.4");

                    polyline.transition().duration(500)
                        .attrTween("points", function(d){
                            this._current = this._current || d;
                            var interpolate = d3.interpolate(this._current, d);
                            this._current = interpolate(0);
                            return function(t) {
                                var d2 = interpolate(t);
                                var pos = outerArc.centroid(d2);
                                pos[0] = radius * 0.75 * (midAngle(d2) < Math.PI ? 1 : -1);
                                return [arc.centroid(d2), outerArc.centroid(d2), pos];
                            };          
                        });

                    polyline.exit().remove();
                };

我会诚实地说，我并不完全理解那里用于绘制线条和标签的所有代码，所以我们非常感谢任何见解或帮助。