如何仅使用正方形生成树图

Question

我目前正在尝试使用d3.js的库树形图。

http://bl.ocks.org/4063582

现在我想知道我是否可以让树形图呈现正方形中的所有项目。我只能让它来渲染矩形。我尝试使用.mode("squarify");，但这不会导致所需的布局。它不会占用所有可用空间并不重要。我只是想让它渲染正方形。

Answer 1

Squari fi ed Treemaps：http://www.win.tue.nl/~vanwijk/stm.pdf。它看起来像是彻底查看了问题并包含了解决方案伪代码。

  

<强>抽象即可。树图方法的扩展，用于可视化分层信息，例如目录结构和   提出了组织结构。标准的treemap方法   经常给出细长的矩形。结果，矩形是   难以比较和选择。提出了一种新的方法   生成矩形近似正方形的布局。至   加强结构的可视化，使用阴影框架   围绕相关节点组

---

其他资源

或者，您可以根据此处建议的数据创建自己的输出：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还提供了各种树形图算法的精彩细分。

  

根据数据，矩形可以有非常不同的方面   比率，使它们难以比较：一个薄的长矩形相同   区域几乎是方形的，看起来非常不同。 Bruls，Huizing和   van Wijk因此开发了 Squarified Treemaps ，它优化了   将节点放置在一个级别中以使它们尽可能正方形。   虽然这对于使静态树图更具可读性是一个好主意   当树形图用于显示随时间的发展时会导致问题。    Ordered Treemap Layouts ，由Shneiderman和Wattenberg开发，   通过保留元素的排序来解决这个问题   寻求保持节点尽可能正方形，从而产生非常   稳定的布局。

结论

The brief read at the wikipedia entry提供了一个很好的解释，说明为什么严格的方形树图仍然难以实现。重点补充。

  

要创建树形图，必须定义切片算法，即a   将矩形划分为指定区域的子矩形的方法。   理想情况下，树形图算法会创建宽高比的矩形   接近一个，进一步保留了一些有序的感觉   输入数据，并进行更改以反映基础数据的变化。   不幸的是，这些属性具有反比关系。作为   宽高比优化后，放置顺序变得更少   可预测的。随着顺序变得更稳定，纵横比为   劣化。

在进一步研究这个主题之后，我同意Lars Kotthoff的观点，即严格地用正方形获得树图并不显得微不足道。至少不基于现有的实现树图算法。最简单的方法可能是创建自己的代码（JS和CSS）来生成嵌套的div或li以实现所需的最终树形图外观。

附录

• http://www.koalastothemax.com/ - 此演示渲染嵌套圆圈，但显然它们都位于正方形内。它可能需要一些工作，但你可能可以使用Koalas到Max代码达到预期的效果。

  

Answer 2

不幸的是，由于数学原因，不可能让树形图渲染正方形中的所有项目。

这里我给你一个反例。 假设在处理结束时，您最终得到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所述，我们了解到您可以使用优化的几何平方表示，实现本文所述的算法。

但这是近似值。

我认为如果你真的只需要正方形，你所能做的就是：

1. 使用例如http://bl.ocks.org/4063530
更改可视化

2. 破解treemap.js代码修改第12行，如下所示

   ratio = 1;

但是在后一种情况下，你可能会有一些空白空格或其他故障。