当前位置：首页 > JavaScript

js实现云图

2026-03-15 01:10:47JavaScript

使用WordCloud库生成云图

WordCloud是一个流行的JavaScript库，用于生成词云。安装方式可通过npm或直接引入CDN链接。

npm install wordcloud

引入库后，创建画布元素并配置词云参数。词频数据以对象形式提供，键为单词，值为权重。

js实现云图

WordCloud(document.getElementById('canvas'), {
  list: [
    ['foo', 12],
    ['bar', 6],
    ['baz', 9]
  ],
  gridSize: 8,
  weightFactor: 10,
  fontFamily: 'Arial',
  color: 'random-dark',
  backgroundColor: '#f0f0f0'
});

使用D3.js自定义云图

D3.js提供更灵活的云图实现方案。需结合d3-cloud插件处理文本布局算法。

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

const words = [
  {text: "Hello", size: 32},
  {text: "World", size: 24}
];

const layout = d3.layout.cloud()
  .size([800, 600])
  .words(words)
  .padding(5)
  .rotate(() => Math.random() * 60 - 30)
  .font("Impact")
  .on("end", draw);

layout.start();

function draw(words) {
  d3.select("#word-cloud")
    .append("svg")
    .attr("width", layout.size()[0])
    .attr("height", layout.size()[1])
    .append("g")
    .selectAll("text")
    .data(words)
    .enter().append("text")
    .style("font-size", d => `${d.size}px`)
    .attr("transform", d => `translate(${[d.x, d.y]})rotate(${d.rotate})`)
    .text(d => d.text);
}

基于Canvas的轻量级实现

原生Canvas API可实现基础云图功能。通过计算文本宽度和碰撞检测实现简单布局。

js实现云图

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const words = [
  {text: "Cloud", weight: 40},
  {text: "Tag", weight: 30}
];

function drawWordCloud() {
  words.forEach(word => {
    ctx.font = `${word.weight}px Arial`;
    ctx.fillText(word.text, 
      Math.random() * (canvas.width - ctx.measureText(word.text).width),
      Math.random() * canvas.height
    );
  });
}

响应式云图设计

添加窗口大小监听器实现响应式布局。使用requestAnimationFrame优化渲染性能。

window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  drawWordCloud();
});

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

交互功能增强

为云图添加鼠标悬停效果和点击事件，提升用户体验。

canvas.addEventListener('mousemove', (e) => {
  const x = e.clientX;
  const y = e.clientY;

  words.forEach(word => {
    if (isMouseOverWord(x, y, word)) {
      ctx.font = `bold ${word.weight + 5}px Arial`;
      ctx.fillStyle = 'red';
    }
  });
});

function isMouseOverWord(x, y, word) {
  // 实现单词边界检测逻辑
  return false;
}