矩形树图布局的那些事儿
G2Plot:一个基于配置、体验优雅、面向数据分析的统计图表库,帮助开发者以最小成本绘制高质量统计图表,诞生于阿里经济体 BI 产品真实场景的业务诉求。 简介 在展示具有层级关系的数据时,除了树状图,还有一种特殊的图形——矩形树图。矩形树图将树状结构转化成了平面矩形,这种结构除了可以展示层级关系外,还很适合展示数据的权重关系。 举例,下图(左)展示了某公司当年销售数据,点击矩形块(办公用品),下钻到子分支数据(下图右)。在同一级别的节点中,按照各自的权重(销量)将坐标系分割成若干矩形块,并区分颜色增强分类的对比度。 本文主要介绍在实现"在同一级别的节点中,按照各自的权重,将坐标系分割成若干矩形块"这一布局功能所用到的算法,以及在 G2 Plot 中如何应用。 在具体到每一种算法前,我们先来思考一下, 一个理想的矩形树图布局应该有怎么样的特性: 我们希望布局尽可能的接近正方形,因为细长条的形状不利于相互比较其权重大小,也不利于点击下钻等交互。定义纵横比为长边/短边,即纵横比越高,效果越差 我们希望树图是有序的,用户可以方便的进行连续阅读 我们希望树图尽可能稳定:当输入数据发生变化时,树图...