<返回更多

前端如何实现词云效果?

2023-03-23  微信公众号  前端充电宝
加入收藏

今天来分享 6 个超实用的词云库,以快速实现词云效果!

wordcloud2.js

wordcloud2.js 是一个基于 html5 Canvas 的词云库,主要用于生成词云效果。它的特点包括:

使用方式如下:

  1. 打开终端命令行工具,进入项目目录。执行以下命令来安装 wordcloud2.js:
npm install wordcloud
  1. 代码中引入 wordcloud2.js 库文件,并创建一个 2D 画布或 HTML 容器元素,并用 id 或 class 属性给它取一个唯一标识符;
import WordCloud from 'wordcloud';

<canvas id="myCanvas"></canvas>
  1. 使用 WordCloud 对象进行词云的生成和渲染。其中,第一个参数是上一步中创建的容器元素,第二个参数是一个设置选项的对象,其中 list 属性是一个按照 [ ['foo', 12], ['bar', 6]] 格式排列的二维数组,表示每个单词及其权重。
WordCloud(document.getElementById('myCanvas'), {
  list: [
    ['foo', 12],
    ['bar', 6],
    // ...
  ],
  // 其他自定义选项
});

图片

Github:https://github.com/timdream/wordcloud2.js

echarts-wordcloud

echarts-wordcloud 是基于 echarts.js 和 wordcloud2.js 的插件,用于在 echarts 可视化图表中创建词云。它的特点包括:

使用方式如下:

  1. 在项目中安装 echarts 和 echarts-wordcloud 两个包:
npm i echarts echarts-wordcloud --save
  1. 在项目中引入 echarts 和 echarts-wordcloud:
import * as echarts from 'echarts';
import 'echarts-wordcloud';
  1. 使用 echarts-wordcloud 生成和渲染词云:
const chartDom = document.getElementById('chart');
const myChart = echarts.init(chartDom);

const option = {
  series: [{
    type: 'wordCloud',
    shape: 'circle',
    gridSize: 10,
    // ...
  }]
};

myChart.setOption(option);

 

图片

 

Github:https://github.com/ecomfe/echarts-wordcloud

d3-cloud

d3-cloud是一个基于 D3.js 和 HTML5 Canvas绘制输出的开源词云实现。它的特点包括:

使用方式如下:

  1. 在终端中键入以下命令来安装d3-cloud:
npm install d3-cloud
  1. 安装完成后,在项目中导入d3-cloud:
import * as d3 from 'd3';
import * as cloud from 'd3-cloud';
  1. 创建一个容器老包含词云
<div id="wordcloud"></div>
  1. JAVAScript文件中,使用以下方式处理数据并生成词云:
const data = [
  {text: "Apple", size: 32},
  {text: "orange", size: 24},
  {text: "banana", size: 16},
  {text: "watermelon", size: 8},
  {text: "grape", size: 4},
];

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

layout.start();

function draw(words) {
  d3.select("#wordcloud")
    .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", function(d) { return d.size + "px"; })
      .style("font-family", "Impact")
      .style("fill", function(d, i) { return d3.schemeCategory10[i % 10]; })
      .attr("text-anchor", "middle")
      .attr("transform", function(d) {
        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
      })
      .text(function(d) { return d.text; });
};

 

图片

 

Github:https://github.com/jasondavies/d3-cloud

react-tagcloud

react-tagcloud 是一个基于 React 框架的标签云组件,用于在应用中呈现具有不同字体大小和颜色的标签。它的特点包括:

使用方式如下:

  1. 在终端或命令行工具中输入以下命令来安装 react-tagcloud:
npm install react-tagcloud
  1. JavaScript 文件中,导入 react-tagcloud 并使用:
import ReactTagCloud from 'react-tagcloud';

const data = [
  { value: 'React', count: 25 },
  { value: 'JavaScript', count: 18 },
  { value: 'Nodejs', count: 30 },
  ...
];

const options = {
  //其他 options 设置
};

//渲染标签云
<ReactTagCloud tags={data} minSize={12} maxSize={35} colorOptinotallow={options} />

图片

Github:https://github.com/madox2/react-tagcloud

VueWordCloud

VueWordCloud 是一个基于 Vue.js 的词云组件库。它的特点包括:

使用方式如下:

  1. 在终端中运行以下命令来安装 VueWordCloud:
npm install vuewordcloud
  1. 在项目中引入 VueWordCloud 组件:
import Vue from 'vue';
import VueWordCloud from 'vuewordcloud';

Vue.component('VueWordCloud', VueWordCloud);


<vue-word-cloud
  style="
    height: 480px;
    width: 640px;
  "
  :words="[['romance', 19], ['horror', 3], ['fantasy', 7], ['adventure', 3]]"
  :color="([, weight]) => weight > 10 ? 'DeepPink' : weight > 5 ? 'RoyalBlue' : 'Indigo'"
  font-family="Roboto"
/>
 

在上面的代码中,'options' 是传递给 VueWordCloud 组件的词云选项,可以根据需要自定义这些选项。

图片

Github:https://github.com/SeregPie/VueWordCloud

react-d3-cloud

react-d3-cloud 是一个使用 d3-cloud 构建的词云 React 组件。

使用方式如下:

  1. 在终端中运行以下命令来安装 react-d3-cloud:
npm install react-d3-cloud
  1. 在 React 组件中使用 :
import React from 'react';
import { render } from 'react-dom';
import WordCloud from 'react-d3-cloud';
import { scaleOrdinal } from 'd3-scale';
import { schemeCategory10 } from 'd3-scale-chromatic';

const data = [
  { text: 'Hey', value: 1000 },
  { text: 'lol', value: 200 },
  { text: 'first impression', value: 800 },
  { text: 'very cool', value: 1000000 },
  { text: 'duck', value: 10 },
];

const schemeCategory10ScaleOrdinal = scaleOrdinal(schemeCategory10);

render(
  <WordCloud
    data={data}
    width={500}
    height={500}
    fnotallow="Times"
    fnotallow="italic"
    fnotallow="bold"
    fnotallow={(word) => Math.log2(word.value) * 5}
    spiral="rectangular"
    rotate={(word) => word.value % 360}
    padding={5}
    random={Math.random}
    fill={(d, i) => schemeCategory10ScaleOrdinal(i)}
    notallow={(event, d) => {
      console.log(`onWordClick: ${d.text}`);
    }}
    notallow={(event, d) => {
      console.log(`onWordMouseover: ${d.text}`);
    }}
    notallow={(event, d) => {
      console.log(`onWordMouseOut: ${d.text}`);
    }}
  />,
  document.getElementById('root')
);
 

 

图片

 

Github:https://github.com/Yoctol/react-d3-cloud

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>