d3图表边缘切割的标签

Question

我在 d3 中创建了饼图。 现在当 d3 pie 的标签很大时，它会超出图表容器。

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

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 是要显示的主要文本，其他值是括号中的百分比。

当我们有大标签或当我们有靠近某个边缘的标签时，这些标签会超出图表容器。

Answer 1

您可以使用下一种方法：

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

希望有帮助