VISALL 动态沃洛诺伊图 (Dynamic Voronoi) 使用文档

简介

动态沃洛诺伊图是VISALL数据可视化库中的特色图表类型之一，用于展示随时间变化的多维数据空间划分。沃洛诺伊图将平面分割成若干个区域，每个区域由距离该区域内任何位置最近的点决定，形成独特的多边形图案。动态沃洛诺伊图通过时间轴的变化，展示数据在不同时间点的空间划分变化，适合展示市场份额、地理区域或概念空间的动态变化。

基本用法

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

// 创建动态沃洛诺伊图
const chart = render(container, {
  layers: [
    {
      type: 'dynamicVoronoi',
      dataIndex: 0,
      encoding: {
        x: '类别', // 标识点分类的字段
        y: '数值', // 数值大小字段
        group: '日期' // 时间分组字段
      },
      animationDuration: 1000 // 动画持续时间（毫秒）
    }
  ],
  data: [
    {
      values: [
        { 类别: 'A类', 数值: 25, 日期: '2023-01-01' },
        { 类别: 'B类', 数值: 18, 日期: '2023-01-01' },
        { 类别: 'C类', 数值: 32, 日期: '2023-01-01' },
        { 类别: 'A类', 数值: 28, 日期: '2023-02-01' },
        { 类别: 'B类', 数值: 22, 日期: '2023-02-01' },
        { 类别: 'C类', 数值: 30, 日期: '2023-02-01' },
        // ...更多数据
      ]
    }
  ]
});

配置参数

参数	类型	默认值	说明
encoding.x	string	-	标识点分类的字段，必须提供一个字符串类型字段
encoding.y	string	-	数值大小字段，必须是数值类型
encoding.group	string	-	时间分组字段，必须是字符串或日期类型
dataIndex	number	0	指定使用的数据集索引
animationDuration	number	1000	动画持续时间（毫秒）

数据要求

x字段要求为字符串类型，用于标识不同的数据点
y字段要求为数值类型，表示数据点的大小或重要性
group字段要求为字符串或日期类型，用于时间序列分组
数据量至少需要大于1条
每个时间点（group）需要有完整的分类数据

高级用法

自定义动画时间

可以通过设置animationDuration参数控制动画速度：

{
  type: 'dynamicVoronoi',
  encoding: {
    x: '产品',
    y: '市场份额',
    group: '季度'
  },
  animationDuration: 2000 // 设置为2秒
}

结合时间轴控制

动态沃洛诺伊图内置时间轴控制，可通过时间轴组件手动控制动画进度：

// 自动播放时间轴
chart.getTimelineInstance().play();

// 暂停时间轴
chart.getTimelineInstance().pause();

// 跳转到指定时间点
chart.getTimelineInstance().goTo(2);

潜规则与注意事项

颜色分配机制：
- 图表会自动为每个x分类分配不同的颜色
- 颜色从预设的色板中循环使用：colorMapKeyByName[item] = colorList[index % colorList.length]
- 如果需要自定义颜色，可以通过主题或presetOption配置
数据排序规则：
- 时间（group）数据会自动按升序排序
- 排序通过transforms: [{ type: 'sort', order: 'ascending' }]实现
- 最后一个时间点的数据会作为初始显示状态
图例交互限制：
- 当前版本不支持图例的点击筛选功能
- 图例的disableSelect属性设置为true
图表尺寸计算：
- 图表会根据容器大小自动计算合适的半径
- 计算公式：dvRadius: (Math.min(chartViewRect.width, chartViewRect.height) / 2) * 0.9
- 图表会占满整个容器空间（grid设置为0边距）
工具提示显示规则：
- 提示框会显示当前数据点的分类名称和对应的数值
- 数值会自动处理单位信息，通过dataMetaInfo[item.seriesName]?.unit获取
动画实现机制：
- 使用了universalTransition实现平滑过渡
- 动画由外部DynamicVoronoiHelper类控制

实现原理

动态沃洛诺伊图内部使用了以下关键技术：

数据预处理：
- 对时间数据进行去重和排序
- 对分类数据进行去重
- 为每个分类分配颜色
数据结构组织：
- 按时间点组织数据集
- 为每个数据点添加额外信息（如颜色、ID等）
渲染实现：
- 使用custom系列自定义实现沃洛诺伊算法
- 通过时间轴控制数据切换
- 使用动画过渡平滑显示变化
交互处理：
- 时间轴组件用于控制动画
- 自定义提示框展示详细信息

示例

市场份额动态变化

{
  type: 'dynamicVoronoi',
  encoding: {
    x: '品牌',
    y: '市场份额',
    group: '季度'
  },
  animationDuration: 1500
}

地区人口密度变化

{
  type: 'dynamicVoronoi',
  encoding: {
    x: '城市',
    y: '人口密度',
    group: '年份'
  },
  animationDuration: 2000
}

常见问题解决

图表不显示
- 检查数据是否符合要求，特别是数据量是否足够
- 确保每个时间点都有完整的分类数据
动画不流畅
- 检查animationDuration设置是否合理
- 数据量过大可能影响渲染性能，考虑减少数据点
颜色显示问题
- 通过主题配置调整颜色方案
- 确保数据分类数量不超过预设颜色数量
时间轴控制失效
- 检查数据中的时间字段是否正确
- 确保时间数据可以正确排序

简介​

基本用法​

配置参数​

数据要求​

高级用法​

自定义动画时间​

结合时间轴控制​

潜规则与注意事项​

实现原理​

示例​

市场份额动态变化​

地区人口密度变化​

常见问题解决​

简介