如何在d3中的包布局中的底部节点内放置文本？

Question

我创建了d3 pack layout.Text添加到节点中。要求是文本应该适合圆形节点，文本应该在底部，与节点大小成比例，并且应该适合节点内部。但是文本要么重叠要么隐藏在另一个节点后面，要么与节点不成比例，如JSFiddle示例中所示 http://jsfiddle.net/oo66o0q0/11/，

http://jsfiddle.net/oo66o0q0/12/，

http://jsfiddle.net/oo66o0q0/13/ 那么如何用一个代码解决所有问题？

            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";                          
                })  
            }       
            }