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：

1. WordCloud(elements, options): 初始化 WordCloud 实例并生成词云图。elements 参数是一个 DOM 元素或元素的 ID，表示词云图的容器。options 参数是一个对象，用于配置词云图的属性。

2. list: 词云图的数据数组，每个元素是一个数组 [word, weight]，表示单词和权重。例如：[['apple', 10], ['banana', 8], ['orange', 6]]。

3. gridSize: 词云图中每个单词的网格大小。默认值为 8。

4. weightFactor: 单词权重的缩放因子。默认值为 1。

5. rotateRatio: 单词旋转的比例。默认值为 0.5，表示 50% 的单词会旋转。

6. minSize: 单词最小字体大小。默认值为 0。

7. maxSize: 单词最大字体大小。默认值为无限大。

8. backgroundColor: 词云图的背景颜色。可以是颜色名称、十六进制值或 RGB 值。

9. color: 单词的颜色。可以是颜色名称、十六进制值或 RGB 值。

10. 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;