Javascript D3 JS向下钻取树形图重叠<；文本>；

我用的是Mike Bostock向下钻取/缩放树形图

链接：

我做了一些定制，但核心还是一样的

如下图所示，当缩放找到“micro rects”时，文本重叠

我试图通过获取文本元素的高度/宽度并将其与矩形的高度/宽度进行比较来修复它

        d3.select(texto).attr("display", function (d) {
                if(d.width > 10 && d.height > 10){
                    if (this.getBBox().height > d.height && this.getBBox().width > d.width)
                        return "none";
                    else return "inline";
                }
                else
                {
                    return "none";
                }
                });

问题是，当转换发生时，rect得到了动态大小，比原始大小高得多

---

我想不出解决办法。

您可以截断文本：@LarsKotthoff根据您的建议，我实现了一个trucante函数。更大的问题是，我在树映射中的深度越深，函数的有效性就越低。所有这些truncate函数都使用height/width/x或y来比较标签的宽度，但正如我所说的，当转换发生时，rect得到的动态大小与最终形式不同。这种方法在树映射发生变化时有效（如链接演示中所示）。当你放大时，你希望它做什么？@Larskothoff你的例子有一个完全不同的数据结构（节点是由div构建的）。我使用的是Bostock结构bost.ocks.org/mike/treemap。它使用g元素来构建树映射。我选择Bostock是因为它在放大和缩小时会向下搜索。