VISALL 动态矩形树图 (Dynamic TreeMap) 使用文档

简介

动态矩形树图是VISALL数据可视化库中的高级图表类型之一，支持基于时间维度的矩形树图数据可视化。该组件能够展示不同时间点的层次化数据结构，通过面积大小直观地表示数据值的大小关系，并支持时间轴交互，实现数据随时间变化的动态展示。

基本用法

import { render } from 'path/to/bundle.esm.min.js';

// 创建动态矩形树图
const chart = render(container, {
  layers: [
    {
      type: 'dynamicTreeMap',
      dataIndex: 0,
      encoding: {
        x: '产品',      // 名称字段
        y: '销售额',    // 值字段（面积大小）
        group: '季度',  // 时间维度字段
        color: '增长率' // 可选的颜色编码字段
      }
    }
  ],
  data: [
    {
      values: [
        { 产品: '电脑', 销售额: 320, 季度: '2023Q1', 增长率: 0.05 },
        { 产品: '手机', 销售额: 520, 季度: '2023Q1', 增长率: 0.12 },
        { 产品: '平板', 销售额: 210, 季度: '2023Q1', 增长率: -0.03 },
        { 产品: '电脑', 销售额: 340, 季度: '2023Q2', 增长率: 0.06 },
        { 产品: '手机', 销售额: 580, 季度: '2023Q2', 增长率: 0.11 },
        { 产品: '平板', 销售额: 200, 季度: '2023Q2', 增长率: -0.05 },
        // ...更多数据
      ]
    }
  ]
});

配置参数

参数	类型	默认值	说明
encoding.x	string	-	矩形块的名称映射字段，必须提供一个字符串类型字段
encoding.y	string	-	矩形块的面积大小映射字段，必须是数值类型
encoding.group	string	-	时间维度字段，用于分类和时间轴展示，支持日期或字符串类型
encoding.color	string	-	可选的颜色编码字段，用于控制矩形块的颜色，必须是数值类型
dataIndex	number	0	指定使用的数据集索引

数据要求

x字段（名称）要求为字符串类型
y字段（值）要求为数值类型
group字段（分组）要求为日期或字符串类型
color字段（颜色）要求为数值类型（可选）
每个时间点（group）至少需要1个数据点
提供准确的字段名映射

高级用法

1. 使用颜色映射表达额外维度

当需要在矩形树图中表达额外的数值维度时，可以使用颜色编码：

{
  type: 'dynamicTreeMap',
  encoding: {
    x: '产品',
    y: '销售额',
    group: '季度',
    color: '利润率'  // 使用颜色表示利润率的高低
  }
}

2. 多时间点数据比较

动态矩形树图的核心优势在于可以比较不同时间点的数据变化：

{
  type: 'dynamicTreeMap',
  encoding: {
    x: '地区',
    y: 'GDP',
    group: '年份'  // 通过时间轴切换不同年份的数据
  }
}

潜规则与注意事项

文本显示机制：
- 当矩形块面积较小时，标签会自动隐藏以避免视觉混乱。
- 实现代码中的判断逻辑：if (params.labelRect.height > params.rect.height) { return { fontSize: 0 } }
时间数据排序：
- 组件会自动对时间维度（group字段）进行升序排序。
- 排序通过transforms: [{ type: 'deDuplication' }, { type: 'sort', order: 'ascending' }]实现。
颜色映射：
- 如果提供了color字段，系统会根据数值自动映射颜色。
- 如果未提供color字段，则使用默认的系统配色方案。
交互机制：
- 树图节点不支持点击下钻功能，nodeClick: false。
- 时间轴支持播放、暂停和手动选择时间点。
- 不支持矩形块的拖拽和缩放（roam: false）。
数字格式化规则：
- 数值会根据系统配置的格式自动进行格式化。
- 如果数据中包含单位信息，会自动在提示框中显示单位。
- 单位信息通过dataMetaInfo[params_.seriesName]?.unit获取。
布局自适应：
- 树图会自动占满100%的容器宽高。
- 树图元素间存在1px的间隔（gapWidth: 1）。

实现原理

动态矩形树图组件内部使用了复杂的数据处理逻辑，主要包括以下步骤：

时间维度处理：提取并排序不同的时间点
数据分组：按时间点对数据进行分组
数据转换：将原始数据转换为树图所需的特定格式
时间轴集成：创建时间轴并与图表进行交互绑定

类型兼容性问题

使用本组件时，需要注意以下类型兼容性问题：

group字段需要确保在同一数据集中类型一致（全为字符串或全为日期）
数值字段（y和color）必须为有效的数字，避免NaN或null值
当使用日期类型的group字段时，确保日期格式统一

示例

基础动态矩形树图

{
  type: 'dynamicTreeMap',
  encoding: {
    x: '产品',
    y: '销售额',
    group: '季度'
  }
}

带颜色编码的动态矩形树图

{
  type: 'dynamicTreeMap',
  encoding: {
    x: '产品类别',
    y: '市场份额',
    group: '年份',
    color: '增长率'
  }
}

常见问题解决

矩形树图显示不全
- 检查容器大小是否足够
- 确保数据中没有极端值导致其他矩形显示过小
标签显示问题
- 小面积的矩形块标签会自动隐藏
- 可通过调整数据组织方式减少小面积矩形块
时间轴显示异常
- 确保group字段中的时间值格式一致
- 检查是否有重复的时间点数据
颜色映射效果不理想
- 确保color字段的数值分布合理
- 考虑预处理数据，如对数值进行归一化处理

简介​

基本用法​

配置参数​

数据要求​

高级用法​

1. 使用颜色映射表达额外维度​

2. 多时间点数据比较​

潜规则与注意事项​

实现原理​

类型兼容性问题​

示例​

基础动态矩形树图​

带颜色编码的动态矩形树图​

常见问题解决​

简介