今天来分享 6 个超实用的现词词云库,以快速实现词云效果!云效
wordcloud2.js 是前端一个基于 HTML5 Canvas 的词云库,主要用于生成词云效果。何实它的现词特点包括:
使用方式如下:
npm install wordcloud
import WordCloud from 'wordcloud';
<canvas id="myCanvas"></canvas>
WordCloud(document.getElementById('myCanvas'), {
list: [
['foo', 12],
['bar', 6],
// ...
],
// 其他自定义选项
});
Github:https://github.com/timdream/wordcloud2.js
echarts-wordcloud 是基于 echarts.js 和 wordcloud2.js 的插件,用于在 echarts 可视化图表中创建词云。它的特点包括:
使用方式如下:
npm i echarts echarts-wordcloud --save
import * as echarts from 'echarts';
import '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.js 和 HTML5 Canvas绘制输出的开源词云实现。它的特点包括:
使用方式如下:
npm install d3-cloud
import * as d3 from 'd3';
import * as cloud from 'd3-cloud';
<div id="wordcloud"></div>
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 框架的标签云组件,用于在应用中呈现具有不同字体大小和颜色的标签。它的特点包括:
使用方式如下:
npm install 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 是一个基于 Vue.js 的词云组件库。它的特点包括:
使用方式如下:
npm install 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 是一个使用 d3-cloud 构建的词云 React 组件。
使用方式如下:
npm install react-d3-cloud
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
责任编辑:武晓燕 来源: 前端充电宝 前端词云效果(责任编辑:焦点)
上半年下载量最高Switch游戏排名出炉 第一还是宝可梦 -
特斯拉为Model S和Model X推出标准续航版 更便宜! -