React前端项目生成词云图

词云图(word cloud)是一个常见的可视化技术，可以直观有效地反映文本主题的特征和结构。 React 项目中来实现前端词云图，可以使用第三方 JavaScript 词云图库，通过 npm 安装，然后在项目中直接使用。
比如可以使用:

jquery.tagcloud.js
wordcloud2.js
d3-cloud
开源的 React 词云图库等。
主要介绍基于wordCloud.js实现的词云图，包括词的背景样式和toolTip以及监听点击事件。

1、wordCloud

WordCloud 算得上是一个轻量级的依赖，因为它是一个相对简单的库，专门用于生成词云图。它的核心功能是将给定的词云数据按照权重和配置进行布局和渲染，生成词云图形。

WordCloud 使用的是 D3.js 库的一部分，并且在实现上比较简单，没有过多的复杂功能。它主要依赖于 SVG 和 Canvas 来绘制词云图，而且体积较小。

相比于其他更复杂的数据可视化库，WordCloud 属于较为轻量级的选择。它适合于那些只需要生成简单词云图的项目，而不需要过多的定制和交互功能。

2、WordCloud 库提供了一些常用的 API 来配置和控制词云图的生成。

以下是一些常用的 API：

WordCloud(elements, options): 初始化 WordCloud 实例并生成词云图。elements 参数是一个 DOM 元素或元素的 ID，表示词云图的容器。options 参数是一个对象，用于配置词云图的属性。
list: 词云图的数据数组，每个元素是一个数组 [word, weight]，表示单词和权重。例如：[['apple', 10], ['banana', 8], ['orange', 6]]。
gridSize: 词云图中每个单词的网格大小。默认值为 8。
weightFactor: 单词权重的缩放因子。默认值为 1。
rotateRatio: 单词旋转的比例。默认值为 0.5，表示 50% 的单词会旋转。
minSize: 单词最小字体大小。默认值为 0。
maxSize: 单词最大字体大小。默认值为无限大。
backgroundColor: 词云图的背景颜色。可以是颜色名称、十六进制值或 RGB 值。
color: 单词的颜色。可以是颜色名称、十六进制值或 RGB 值。
fontWeight: 单词的字体粗细。可以是 CSS 字体粗细值，如 'normal'、'bold' 等。

这些只是一些常用的 API，WordCloud 库还提供了其他一些配置选项和方法。你可以查阅 WordCloud 库的官方文档来获取完整的 API 参考和更多详细的使用说明。

WordCloud 库的文档可以在其 GitHub 存储库中找到：https://github.com/jasondavies/d3-cloud

3、下面是基于React+ts的代码例子

import React, { useEffect, useState } from 'react';
import WordCloud from 'wordcloud';const WordCloudPage: React.FC = () => {const [words, setWords] = useState<string[]>([]);useEffect(() => {// 模拟从 API 获取词云数据const fetchData = async () => {try {const response = await fetch('https://api.example.com/word-cloud-data');const data = await response.json();setWords(data.words);} catch (error) {console.error('Failed to fetch word cloud data:', error);}};fetchData();}, []);useEffect(() => {// 在组件挂载后初始化词云图const container = document.getElementById('word-cloud-container');if (container) {WordCloud(container, {list: words.map((word) => [word, Math.random() * 10 + 1]),gridSize: 8,weightFactor: 10,tooltip: {enabled: true,formatter: (item) => `${item[0]}: ${item[1]}`,},hover: (item, dimension, event) => {// 添加悬停样式event.target.style.fontWeight = 'bold';},mouseout: (item, dimension, event) => {// 移除悬停样式event.target.style.fontWeight = 'normal';},});// 监听点击事件container.addEventListener('click', handleWordClick);}return () => {// 移除事件监听器container?.removeEventListener('click', handleWordClick);};}, [words]);const handleWordClick = (event: MouseEvent) => {const clickedWord = event.target as HTMLElement;const wordId = clickedWord.getAttribute('data-word-id');if (wordId) {// 在这里处理点击词语的逻辑console.log('Clicked word ID:', wordId);}};return (<div><h1>Word Cloud</h1><div id="word-cloud-container" style={{ width: '800px', height: '500px' }}>{words.map((word) => (<span key={word.id} data-word-id={word.id}>{word.text}</span>))}</div></div>);
};export default WordCloudPage;