7

我目前正在试验 d3.js 的图库树形图。

http://bl.ocks.org/4063582

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

4

2 回答 2

9

平方树形图：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

用于空间受限的层次结构可视化的树形图显示了各种树形图算法的历史，其目标是将矩形比率降低到 1。您可能会发现一些论文很有帮助。

此页面还提供了对各种树图算法的很好分解。

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

结论

维基百科条目的简短阅读很好地解释了为什么严格的方形树形图仍然难以实现。重点补充。

要创建树状图，必须定义一种平铺算法，即一种将矩形划分为指定区域的子矩形的方法。理想情况下，树形图算法将创建纵横比接近 1 的矩形，此外还保留输入数据中的某种顺序感，并进行更改以反映基础数据的变化。 不幸的是，这些属性具有反比关系。随着纵横比的优化，放置顺序变得难以预测。随着顺序变得更加稳定，纵横比降低。

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

附录

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

    嵌套圈子

于 2013-01-30T16:48:56.427 回答
1

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

这里我只是给你一个反例。假设在处理结束时，您最终得到 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。

所以这不可能有所有的正方形

从那篇论文中，正如JSuar所提到的，我们了解到您可以拥有一个优化的几乎平方表示，实现论文中描述的算法。

但这是一个近似值。

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

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

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

    比率 = 1;

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

于 2013-01-31T23:01:47.213 回答