javascript - D3 TreeMap : reserve min width and height for the smallest node

Question

我是 D3 世界的新手，我构建了我的第一个 TreeMap 。

我找不到保留最小节点尺寸(特定宽度和高度)的解决方案。

基本上，如果您查看我的 JSfiddle，您会发现尺寸为 1 的最小节点无法在内部正确显示其标签，因为框/节点太小，因此文本放不下。

{"name": "label5", "size": 1}

有人可以帮助我如何保留/指定最小节点的大小(宽度和高度)以便适合特定文本/标签吗？

这是我的完整 JSFiddle :

Answer 1

一种可能会解决您的问题的方法是稍微更改代码中的第 21 行和第 42 行，使它们看起来像这样:

第 21 行:

.value(function(d) { return d.size + 20; });

第 42 行:

    : function(d) { return d.size + 20; };

(请注意，我所做的只是添加 "+ 20"。

这里是修改后的 jsfiddle:modified example .

现在，根据您的数据，您可能想要做一些其他事情，也许您可​​以计算出所有值总和的 1% 而不是 20，但我希望这是一个基本的想法，您的固体起点。

希望这对您有所帮助。

这是修改后的树状图的截图: