跳到主要内容

VISALL 词云图 (Word Cloud) 使用文档

简介​

词云图是VISALL数据可视化库中的一种特殊图表类型，主要用于展示文本数据的权重或频率。词云图通过不同大小、颜色和位置的文字直观地呈现关键词的重要性，是文本数据可视化的常用表现形式。

基本用法​

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

// 创建词云图
const chart = render(container, {
  layers: [
    {
      type: 'wordCloud',
      dataIndex: 0,
      encoding: {
        x: 'word', // 文本字段名
        y: 'value' // 权重字段名
      }
    }
  ],
  data: [
    {
      values: [
        { word: '数据', value: 100 },
        { word: '可视化', value: 85 },
        { word: '分析', value: 70 },
        // ...更多数据
      ]
    }
  ]
});

配置参数​

参数类型默认值说明
encoding.xstring-文本字段映射，必须提供一个字符串类型字段
encoding.ystring-权重字段映射，必须是数值类型，决定文字大小
dataIndexnumber0指定使用的数据集索引
rankingbooleanfalse是否显示前三名排名标记
dvTextColorsstring[]['#090E18', '#313A4F', '#4D576F', '#848D9F', '#9EA8B5', '#A9B2BE', '#A9B2BE']文本颜色配置数组，从重要到不重要排序
dvFontSizeRange[number, number][12, 32]字体大小范围，[最小值, 最大值]
dvFontWeightRange[number, number][400, 600]字体粗细范围，[最小值, 最大值]
customClickEventfunction-自定义点击事件处理函数
customHoverEventfunction-自定义悬停事件处理函数

数据要求​

  • x字段(文本字段)要求为字符串类型
  • y字段(权重字段)要求为数值类型
  • 数据量至少需要大于1条
  • 提供准确的字段名映射

高级用法​

1. 自定义颜色​

根据文本重要性自定义不同层级的颜色：

{
  type: 'wordCloud',
  encoding: {
    x: 'keyword',
    y: 'frequency'
  },
  dvTextColors: ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#9400D3']
}

2. 排名标记显示​

显示前三名的排名标记：

{
  type: 'wordCloud',
  encoding: {
    x: 'topic',
    y: 'mentions'
  },
  ranking: true
}

3. 自定义字体大小范围​

调整词云中文字的大小范围：

{
  type: 'wordCloud',
  encoding: {
    x: 'word',
    y: 'count'
  },
  dvFontSizeRange: [16, 48]
}

4. 交互事件处理​

添加自定义点击和悬停事件处理：

{
  type: 'wordCloud',
  encoding: {
    x: 'term',
    y: 'weight'
  },
  customClickEvent: (event) => {
    console.log('Clicked:', event.name, event.value);
    // 执行自定义操作
  },
  customHoverEvent: (event) => {
    console.log('Hover on:', event.name, event.value);
    // 执行自定义操作
  }
}

潜规则与注意事项​

  1. 数据排序机制：

    • 词云图默认会对y轴数据(权重)进行降序排序，无需手动排序。
    • 排序通过util.dataTransform.transform(data, [{ type: 'sort', field: y, order: 'descending' }])实现。

  2. 颜色分级规则：

    • 词云图根据权重值自动将文本分为7个等级，应用不同颜色。
    • 分级标准为权重值占最大值的百分比：100%、≥80%、≥60%、≥40%、≥20%、>0%和0%。
    • 颜色映射通过dvTextColors数组配置，数组中的颜色从重要到不重要排序。

  3. 排名标记：

    • 开启ranking选项后，前三名的词会在右上角显示特殊的排名标记。
    • 标记颜色分别为红色(第一名)、橙色(第二名)和蓝色(第三名)。

  4. 字体大小计算：

    • 词云中文字大小根据权重和dvFontSizeRange范围自动计算。
    • 默认的字体大小范围为12px至32px。

  5. 交互效果：

    • 鼠标悬停在文字上时，会突出显示该文字并淡化其他文字。
    • 点击事件会触发customClickEvent回调，传入相关数据。

  6. 布局算法：

    • 词云使用专门的布局算法避免文字重叠。
    • 布局参数通过layout配置项设置，包括是否按文本布局、重叠面积阈值等。

实现原理​

词云图组件内部使用了复杂的数据处理和布局算法，主要包括以下步骤：

  1. 数据预处理：排序和归一化
  2. 文本分级：根据权重划分不同等级
  3. 颜色映射：为不同等级的文本分配不同颜色
  4. 布局计算：避免文字重叠并优化视觉效果
  5. 排名标记：为前三名添加特殊标记

类型兼容性问题​

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

  1. y轴字段必须是数值类型，否则会导致权重计算错误
  2. x轴字段应为字符串类型，用于显示文本内容
  3. 提供的颜色数组长度应至少为7，否则可能导致部分级别缺失颜色定义

示例​

基础词云图​

{
  type: 'wordCloud',
  encoding: {
    x: '关键词',
    y: '出现次数'
  }
}

带排名标记的词云图​

{
  type: 'wordCloud',
  encoding: {
    x: '标签',
    y: '热度'
  },
  ranking: true,
  dvTextColors: ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#9400D3']
}

自定义字体大小和粗细的词云图​

{
  type: 'wordCloud',
  encoding: {
    x: '术语',
    y: '引用数'
  },
  dvFontSizeRange: [18, 60],
  dvFontWeightRange: [300, 700]
}

常见问题解决​

  1. 词云显示不全

    • 检查容器大小是否足够
    • 检查数据权重分布是否合理，过于集中的权重可能导致布局问题

  2. 文字重叠严重

    • 可以调整容器大小或减少数据量
    • 考虑调整字体大小范围，减小最大字体大小

  3. 颜色效果不理想

    • 自定义dvTextColors参数，根据实际需求设置颜色
    • 确保提供的颜色数组足够长，覆盖所有级别

  4. 排名标记位置不准确

    • 排名标记位置会根据文字大小和位置自动计算
    • 如果位置偏移，可能是数据更新后未重新计算位置，尝试刷新图表
编辑此页
最后由 gongyuzhouchang 于 更新