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

Question

我目前正在试验 d3.js 的画廊 TreeMap 。

http://bl.ocks.org/4063582

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

Answer 1

平方 TreeMap :http://www.win.tue.nl/~vanwijk/stm.pdf .它看起来像是对问题的彻底审视，并包含解决方案伪代码。

Abstract. An extension to the treemap method for the visualization of hierarchical information, such as directory structures and organization structures, is presented. The standard treemap method often gives thin, elongated rectangles. As a result, rectangles are difficult to compare and to select. A new method is presented to generate lay-outs in which the rectangles approximate squares. To strenghten the visualization of the structure, shaded frames are used around groups of related nodes

---

其他资源

或者，您可以根据此处建议的数据创建自己的输出: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展示了各种 TreeMap 算法的历史，大多数算法的目标是将矩形比减小到 1。您可能会发现一些论文有帮助。

This page还很好地分解了各种 TreeMap 算法。

Depending on the data, the rectangles can have very different aspect ratios, making them hard to compare: a thin long rectangle of the same area as an almost square one looks very different. Bruls, Huizing, and van Wijk therefore developed Squarified Treemaps, which optimize the placement of nodes within a level to make them as square as possible. While that is a great idea to make static treemaps more readable, it causes problems when treemaps are used to show developments over time. Ordered Treemap Layouts, developed by Shneiderman and Wattenberg, solve this problem by conserving the ordering of elements while seeking to keep nodes as square as possible, and thus produce very stable layouts.

结论

The brief read at the wikipedia entry很好地解释了为什么严格正方形的树状图仍然难以实现。添加了重点。

To create a treemap, one must define a tiling algorithm, that is, a way to divide a rectangle into sub-rectangles of specified areas. Ideally, a treemap algorithm would create rectangles of aspect ratio close to one, furthermore preserve some sense of the ordering in the input data, and change to reflect changes in the underlying data. Unfortunately, these properties have an inverse relationship. As the aspect ratio is optimized, the order of placement becomes less predictable. As the order becomes more stable, the aspect ratio is degraded.

在进一步研究该主题后，我同意 Lars Kotthoff 的观点，即获得严格包含正方形的树状图似乎并不简单。至少不基于现有的已实现 TreeMap 算法。解决此问题的最简单方法可能是创建您自己的代码(JS 和 CSS)以生成嵌套的 div 或 li 以实现所需的最终树状图外观。

附录

• http://www.koalastothemax.com/ - 此演示呈现嵌套圆圈，但很明显它们都位于正方形内。这可能需要一些工作，但您可能可以使用 Koalas to the Max 代码实现预期的结果。