矩形树图

[配置项]

简介

矩形树图，是一个由不同大小的嵌套式矩形来显示树状结构数据的统计图表。在矩形树图中，父子层级由矩形的嵌套表示。在同一层级中，所有矩形依次无间隙排布，他们的面积之和代表了整体的大小。单个矩形面积由其在同一层级的占比决定

矩形树图需要树形结构 ( 至少有一个父级节点 )数据，且子节点需要有权重，对于不带权重的树形结构数据，应用树形结构图或径向树图来表示。

图表构成

矩形树图主要由表现层级结构的矩形图元、提示信息及其他组件构成。

矩形图元为矩形树图的基本要素，相关的绘制配置必不可少:

treemapChart.type: 图表类型，柱状体 / 条形图的类型为'treemap'
treemapChart.data: 图表绘制的数据源
treemapChart.categoryField: 数值字段，映射不同图元
treemapChart.valueField: 节点权重字段，映射图元的大小

提示信息等作为辅助图表展示的组件，属于可选配置，自带默认效果和功能:

treemapChart.tooltip: 提示信息，默认交互时显示，详细配置见VChart 提示信息组件配置
更多组件配置见VChart treemapChart 配置

快速上手

关键配置

categoryField 属性声明为分类字段，字段值通常为节点名称
valueField 属性声明为数值字段，字段值通常为节点权重

矩形树图特性

数据

在矩形树图中，数据通常通常为具有层级结构，形式如下:

data: [
  {
    name: 'area',
    values: [
      {
        name: 'A',
        children: [
          { name: 'A-a', value: 1 },
          { name: 'A-b', value: 2 }
        ]
      },
      {
        name: 'B',
        children: [
          { name: 'B-a', value: 3 },
          { name: 'B-b', value: 4 }
        ]
      }
    ]
  }
];

图表布局

矩形分割

分割方式树图的算法本质是对矩形区域进行分割，并在分割后的细分区域进行再一次分割，直到得到最小区域。在 VChart 中，可以通过treeMapChart.splitType: 'binary' | 'dice' | 'slice' | 'sliceDice' | 'squarify'进行分割方式的指定，默认值为'binary'。

'binary': 递归地将指定的节点分割成一个近似平衡的二叉树，对宽的矩形选择水平分割，对高的矩形选择垂直分割。
'dice': 根据指定节点的每个子节点的值水平划分由 x0, y0, x1, y1 指定的矩形区域。子节点按顺序定位，从给定矩形的左边缘（x0）开始。如果子节点的值之和小于指定节点的值（即，如果指定节点有一个非零的内部值），剩余的空位将被定位在给定矩形的右边缘（x1）。
'slice': 和'dice'类似，方向为竖直方向分割。
'sliceDice': 节点奇数深度，用'slice'；节点偶数深度，用'dice'。
'squarify': 尽可能按照一个特定长宽比的分割矩形。

分割比例使用treemapChart.aspectRatio可以配置每次分割的比例，默认值(1 + Math.sqrt(5)) / 2，约为 1.618

层级展示

两个同层级节点之间的间距: treemapChart.gapWidth
层级边距: nodePadding
展示的最大层级: maxDepth
当区域面积（px * px）小于设定值后，节点将被隐藏: minVisibleArea
当区域面积（px * px）小于设定值后，节点的子节点将被隐藏: minChildrenVisibleArea

图表交互

拖拽和缩放

由于矩形树图展示的数据量往往比较大且层级结构复杂，所以 VChart 提供了针对矩形树图的拖拽和缩放交互，配置treemapChart.roam: true即可开启拖拽和缩放。

下钻

下钻功能是在矩形树图、Circle Packing、旭日图等展示不同层次的下级数据时，能够单击父类别以深入挖掘子类别信息的能力。通过下钻功能，用户可以逐级查看详情，深入探索数据的层级细节，并更好地了解数据之间的关系和差异性，得出更高质量的分析结论。

通过配置treemapChart.drill: true 和 treemapChart.drillField 可以分别开启下钻功能和配置下钻依据的字段（下钻字段默认情况会使用自动生成 unique key, 但在使用 API 钻取时需要配置drillField）。