如何仅使用正方形生成树图
Thy*_*hys 7 javascript treemap d3.js
我目前正在尝试使用d3.js的库树形图.
现在我想知道我是否可以使树图渲染正方形中的所有项目.我只能让它来渲染矩形.我试图使用,.mode("squarify");但这不会导致所需的布局.它不会占用所有可用空间并不重要.我只是想让它渲染正方形.
Squari fi ed Treemaps:http://www.win.tue.nl/~vanwijk/stm.pdf.它看起来像是彻底查看了问题并包含了解决方案伪代码.
摘要.提出了树图方法的扩展,用于可视化分层信息,例如目录结构和组织结构.标准的树形图方法通常会提供细长的矩形.因此,矩形很难比较和选择.提出了一种新方法来生成布局,其中矩形近似于正方形.为了加强结构的可视化,在相关节点组周围使用着色帧
其他资源
或者,您可以根据此处建议的数据创建自己的输出:如何使用jQuery将JSON树呈现为使用div的嵌套HTML？
对方差算法的一些改进:http://incise.org/d3-binary-tree-treemap.html
用于空间受限的层次结构可视化的树形图显示了各种树形图算法的历史记录,其目标是将矩形比率降低到1.您可能会发现一些文章很有用.
此页面还提供了各种树形图算法的精细分解.
根据数据,矩形可以具有非常不同的纵横比,使得它们难以比较:与几乎正方形相同的区域的细长矩形看起来非常不同.因此,Bruls,Huizing和van Wijk开发了Squarified Treemaps,它优化了一个级别内节点的放置,使它们尽可能方正.虽然使静态树图更具可读性是一个好主意,但当使用树图来显示随时间的变化时,它会导致问题. 由Shneiderman和Wattenberg开发的有序树图布局通过保留元素的排序同时寻求保持节点尽可能正方形来解决这个问题,从而产生非常稳定的布局.
结论
维基百科条目的简要介绍提供了一个很好的解释为什么严格的方形树图仍然难以实现.强调补充说.
要创建树形图,必须定义平铺算法,即将矩形划分为指定区域的子矩形的方法.理想情况下,树形图算法会创建纵横比接近1的矩形,进一步保留输入数据中的排序感,并更改以反映基础数据的变化. 不幸的是,这些属性具有反比关系.随着纵横比的优化,放置顺序变得不太可预测.随着顺序变得更稳定,纵横比降低.
在进一步研究这个主题之后,我同意Lars Kotthoff的观点,即严格地用正方形获得树图并不显得微不足道.至少不基于现有的实现树图算法.最简单的方法可能是创建自己的代码(JS和CSS)来生成嵌套的divs或lis,以实现所需的最终树形图外观.
附录
http://www.koalastothemax.com/ - 这个演示呈现嵌套的圆圈,但很明显它们都位于正方形内.它可能需要一些工作,但你可能可以使用Koalas到Max代码达到预期的效果.
