Javascript d3图表边缘切割的标签

我已经在d3中创建了饼图。 现在，当d3饼图的标签很大时，它将从图表容器中消失

如何确保标签是否超出边缘容器，然后单词应该断开，然后下一个单词将进入下一行。 我在下面的饼图中添加了文本

var text = main.select('.labels').selectAll('text')
                .data(pie(options.data), key);

            text.enter()
                .append("text")
                .attr("dy", ".35em")
                .attr('x', function(d, i)
                {
                    centroid = arc.centroid(d);
                    midAngle = Math.atan2(centroid[1], centroid[0]);
                    x = Math.cos(midAngle) * (radius * 1.2);
                    sign = (x > 0) ? 1 : -1
                    labelX = x + (5 * sign)
                    return labelX;
                })
                .attr('y', function(d, i){
                    centroid = arc.centroid(d);
                    midAngle = Math.atan2(centroid[1], centroid[0]);
                    y = Math.sin(midAngle) * (radius * 1.2);
                    return y;
                })
                .style('text-anchor', function(d){
                    centroid = arc.centroid(d);
                    midAngle = Math.atan2(centroid[1], centroid[0]);
                    x = Math.cos(midAngle) * (radius * 1.2);
                    return (x > 0) ? "start" : "end";
                })
                .style('font-size', '13px')
                .text(function(d) {
                    return d.data.name + ': ' + d.data.value + "( " + d3.round(100* d.value / total, 1) + "% " + ")";
                });

d、 data.name是要显示的主文本，其他值是括号中的百分比

---

当我们有大标签或靠近某个边缘的标签时，这些标签将从图表容器中消失。

您可以使用下一种方法：

If (label.x) < (width/2)  =>> text-anchor: start
If (label.x) > (width/2)  =>> text-anchor: end

希望这有帮助