js实现云图

使用WordCloud库生成云图

安装WordCloud库：

npm install wordcloud

基础实现代码：

const WordCloud = require('wordcloud');

const canvas = document.getElementById('wordcloud-canvas');
const words = [
  ['JavaScript', 30],
  ['HTML', 25],
  ['CSS', 20],
  ['React', 18],
  ['Node.js', 15]
];

WordCloud(canvas, {
  list: words,
  weightFactor: 10,
  color: 'random-dark',
  backgroundColor: '#f0f0f0',
  rotateRatio: 0.5
});

使用D3.js创建自定义云图

安装D3.js：

npm install d3

实现代码：

import * as d3 from 'd3';
import 'd3-cloud';

const words = [
  {text: "JavaScript", size: 30},
  {text: "HTML", size: 25},
  {text: "CSS", size: 20},
  {text: "React", size: 18}
];

const layout = d3.layout.cloud()
  .size([800, 500])
  .words(words)
  .padding(5)
  .rotate(() => ~~(Math.random() * 2) * 90)
  .font("Impact")
  .fontSize(d => d.size)
  .on("end", draw);

layout.start();

function draw(words) {
  d3.select("#wordcloud-container")
    .append("svg")
    .attr("width", layout.size()[0])
    .attr("height", layout.size()[1])
    .append("g")
    .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
    .selectAll("text")
    .data(words)
    .enter().append("text")
    .style("font-size", d => d.size + "px")
    .style("font-family", "Impact")
    .style("fill", (d, i) => d3.schemeCategory10[i % 10])
    .attr("text-anchor", "middle")
    .attr("transform", d => "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")")
    .text(d => d.text);
}

使用Chart.js插件生成云图

安装Chart.js和插件：

npm install chart.js chartjs-plugin-wordcloud

实现代码：

import Chart from 'chart.js';
import 'chartjs-plugin-wordcloud';

const ctx = document.getElementById('wordcloud-chart').getContext('2d');
const words = [
  {text: 'JavaScript', value: 30},
  {text: 'HTML', value: 25},
  {text: 'CSS', value: 20}
];

new Chart(ctx, {
  type: 'wordCloud',
  data: {
    labels: words.map(d => d.text),
    datasets: [{
      data: words.map(d => d.value),
    }]
  },
  options: {
    plugins: {
      wordcloud: {
        minRotation: 0,
        maxRotation: 0,
        fontFamily: 'Arial',
        fontWeight: 'bold',
        color: () => `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`
      }
    }
  }
});

使用HTML5 Canvas手动实现

基础实现代码：

const canvas = document.getElementById('custom-wordcloud');
const ctx = canvas.getContext('2d');
const words = [
  {text: 'JavaScript', size: 40},
  {text: 'HTML', size: 35},
  {text: 'CSS', size: 30}
];

function drawWordCloud() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  words.forEach(word => {
    ctx.font = `${word.size}px Arial`;
    const width = ctx.measureText(word.text).width;
    const x = Math.random() * (canvas.width - width);
    const y = Math.random() * (canvas.height - word.size);

    ctx.fillStyle = `hsl(${Math.random() * 360}, 70%, 50%)`;
    ctx.fillText(word.text, x, y);
  });
}

drawWordCloud();

云图数据预处理

从文本生成词频统计：

function generateWordFrequencies(text, minLength = 3) {
  const words = text.toLowerCase().match(/\b\w+\b/g) || [];
  const frequencies = {};

  words.forEach(word => {
    if(word.length >= minLength) {
      frequencies[word] = (frequencies[word] || 0) + 1;
    }
  });

  return Object.entries(frequencies)
    .sort((a, b) => b[1] - a[1])
    .slice(0, 50);
}

const sampleText = "JavaScript is a programming language...";
const wordData = generateWordFrequencies(sampleText);