如何自动调整矩形的高度以在 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

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

你想让条形变大，额外的高度取决于你的字符串实际有多长。

1. 找出条形的最大宽度是多少，以及它可以容纳多少个字符。添加额外高度（原始高度的倍数），具体取决于您有多少文字。
2. 使用overflow-wrap，如this question 以适应div 内的文本。

这有点涉及，所以我希望以上内容可以为您提供一些关于如何解决问题的想法。对于未包含解决问题的代码，我提前道歉。