D3.js 在d3中，如何在包布局的底部节点中匹配文本？

我创建了d3包布局。文本添加到节点中。要求是文本应该以这样的方式适合于圆形节点，即文本应该位于底部，与节点大小成比例，并且应该适合于节点内部。但文本要么重叠，要么隐藏在另一个节点后面，要么与JSFIDLE示例中的节点不成比例 ,

,

.那么，如何用一个代码解决所有问题

            function treeLayout(nodes){                 
                var node = diagramLayout.selectAll(".node");
                node = node.data(nodes.descendants(), function(d) {
                            return d.uid; 
                            });     
                var nodeEnter = node.enter().append("g")
                .attr("class", "node")
                .attr("height", nodeHeight)
                .attr("width", nodeWidth)                   
                nodeEnter.append("circle")
                        .attr("id", function(d) { return "node-" + d.data.name; })
                        .attr("r", function(d) { return d.r; })
                        .style("fill", function(d) { return color(d.depth); });
                nodeEnter.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });                
                var nodeText = nodeEnter.append("text")
                      .text(function(d) { return d.data.name; })
                      .attr("clip-path", function(d) { return "url(#clip-" + d.data.name + ")"; })
                        .style("text-anchor", "middle")
                        .style("stroke", "#000")
                        .style("stroke-width", "0.1px")
                        .attr("y", function(d) {
                        return d.r-(d.r/d.data.name.length); 
                        })
                        .style("font-family", "sans-serif") 
                      .style("font-size", function(d) { 

                      return d.r/(d.data.name.length)+ "px";                          
                })  
            }       
            }

---

这个问题有解决方案吗？这个问题有解决方案吗？