我目前正在试验 d3.js 的图库树形图。
现在我想知道是否可以让树形图将所有项目呈现为正方形。我只能让它渲染矩形。我尝试使用.mode("squarify");，但这不会导致所需的布局。它不会使用所有可用空间并不重要。我只是想让它渲染正方形。
【问题讨论】：
ratio 参数设置为1）。实现您想要的将需要修改算法并对源进行相当大的更改。根据您的需要单独渲染正方形可能更容易。
标签： javascript d3.js treemap
平方树形图：http://www.win.tue.nl/~vanwijk/stm.pdf。它看起来像是对问题的彻底审视，并包含解决方案伪代码。
摘要。树图方法的扩展，用于可视化分层信息，例如目录结构和 组织结构，介绍。标准树形图方法 通常给出细长的矩形。因此，矩形是 难以比较和选择。提出了一种新方法 生成矩形近似正方形的布局。到 加强结构的可视化，使用阴影框架 围绕相关节点组
或者，您可以根据此处建议的数据创建自己的输出：How to use jQuery to render a JSON tree as nested HTML using divs?
对平方算法的一些改进：http://incise.org/d3-binary-tree-treemap.html
Treemaps for space-constrained visualization of hierarchies 展示了各种树形图算法的历史，主要目的是将矩形比率降低到 1。您可能会发现其中的一些论文很有帮助。
This page 还提供了对各种树形图算法的很好分解。
根据数据，矩形可以有非常不同的方面 比率，使它们难以比较：相同的细长矩形 几乎正方形的区域看起来非常不同。布鲁斯、惠青和 van Wijk 因此开发了Squarified Treemaps，它优化了 在关卡中放置节点以使它们尽可能正方形。 虽然这是使静态树形图更具可读性的好主意，但它 当使用树形图显示一段时间内的发展时会导致问题。 Ordered Treemap Layouts，由 Shneiderman 和 Wattenberg 开发， 通过保留元素的顺序来解决这个问题 寻求保持节点尽可能正方形，从而产生非常 稳定的布局。
The brief read at the wikipedia entry 很好地解释了为什么严格的方形树形图仍然难以实现。已添加重点。
要创建树形图，必须定义一个平铺算法，即 将矩形划分为指定区域的子矩形的方法。 理想情况下，树图算法将创建纵横比的矩形 接近一，此外还保留了一些顺序感 输入数据，并更改以反映基础数据的更改。 不幸的是，这些属性之间存在反比关系。作为 纵横比优化，放置顺序变少 可预测的。随着顺序变得更加稳定，纵横比为 降级了。
在进一步研究该主题后，我同意 Lars Kotthoff 的观点，即获得严格使用正方形的树状图并非易事。至少不是基于现有实现的树形图算法。解决此问题的最简单方法可能是创建自己的代码（JS 和 CSS）以生成嵌套的 divs 或 lis 以实现所需的最终树形图外观。
http://www.koalastothemax.com/ - 这个演示渲染了嵌套的圆圈，但很明显它们都位于正方形内。这可能需要一些工作，但您可能可以使用 Koalas to the Max 代码实现预期的结果。
【讨论】：
不幸的是，由于数学原因，不可能让树状图将所有项目呈现为正方形。
这里我只是给你一个反例。 假设在处理结束时，您最终得到 4 个类别（A、B、C、D），其表面积如下。
A=2
B=2
C=2
D=1
独立于你给他们的位置，不可能有一个正方形甚至矩形的最终树形图。
想一想：在以下每种模式中，您总是缺少一个角落
AB AC AD BA BC BD CA CB CD DA DB DC
CD BD BC CD AD AC BD AD AB CB AC AB ..there are more
因为其中一个正方形的表面积 = 1。
所以不可能有所有的正方形
从that paper 中，正如JSuar 所提到的，我们了解到您可以使用优化的几乎平方表示，实现本文中描述的算法。
但这是一个近似值。
如果你真的只需要正方形，我认为你所能做的就是：
修改treemap.js代码修改第12行如下
比率 = 1;
但在后一种情况下，您可能会有一些空白或其他故障。
【讨论】：