如何自动调整矩形的高度以在 d3 树中包含其中的文本

Question

大家好，我的问题有更新了........ 自动调整高度的问题已经解决但是如果单击调整其子重叠高度的节点，则存在另一个问题，如您在我的示例中所见....我们可以使用此 jsfiddle 作为参考 http://jsfiddle.net/elviz/Ge58Q/13/

如果超过120个字符，我还需要剪切我的文本，另一个将占据调整后的节点高度.....

这是我调整高度的方法

           nodeEnter.append("rect")
          .attr("y", -barHeight / 2)
          .attr("height", function(d){
            if(d.name.length < 120){
                return barHeight;
            }else if(d.name.length > 120 ){
                return barHeight * 2;
            }
          })
          .attr("width", barWidth)
          .style("fill", color)
          .on("click", click);

Answer 1

这取决于您希望栏内的文本格式如何。我会走天真的路。

您想使条形变大，额外高度的量取决于您的字符串的实际长度。

找出栏的最大宽度是多少，以及它可以容纳多少个字符。添加额外的高度（原始高度的倍数），具体取决于您有多少文字。
使用 overflow-wrap，就像在 this question 中一样，使文本适合 div。

这有点复杂，所以我希望上面的内容能给您一些解决问题的想法。对于没有包含解决问题的代码，我提前表示歉意。

如何自动调整矩形的高度以在 d3 树中包含其中的文本

how to auto-adjust the height of an rectangle to contain the text inside it in d3 tree

tree

svg

text

rectangles

d3.js