前端如何實(shí)現(xiàn)詞云效果？

今天來(lái)分享 6 個(gè)超實(shí)用的詞云庫(kù)，以快速實(shí)現(xiàn)詞云效果！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請(qǐng)、雅安服務(wù)器托管、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、友誼網(wǎng)站維護(hù)、網(wǎng)站推廣。

wordcloud2.js

wordcloud2.js 是一個(gè)基于 HTML5 Canvas 的詞云庫(kù)，主要用于生成詞云效果。它的特點(diǎn)包括：

• 可以在瀏覽器和 Node.js 環(huán)境下運(yùn)行。
• 支持文本顏色、字體大小、旋轉(zhuǎn)等多種自定義選項(xiàng)。
• 可以生成 SVG 矢量圖形，從而支持高分辨率或放大后不失真。
• 支持靈活的數(shù)據(jù)源類(lèi)型：使用數(shù)組、JSON 數(shù)據(jù)、URL 或回調(diào)函數(shù)來(lái)提供詞頻數(shù)據(jù)。

使用方式如下：

1. 打開(kāi)終端命令行工具，進(jìn)入項(xiàng)目目錄。執(zhí)行以下命令來(lái)安裝 wordcloud2.js：

npm install wordcloud

1. 代碼中引入 wordcloud2.js 庫(kù)文件，并創(chuàng)建一個(gè) 2D 畫(huà)布或 HTML 容器元素，并用 id 或 class 屬性給它取一個(gè)唯一標(biāo)識(shí)符；

import WordCloud from 'wordcloud';

1. 使用 WordCloud 對(duì)象進(jìn)行詞云的生成和渲染。其中，第一個(gè)參數(shù)是上一步中創(chuàng)建的容器元素，第二個(gè)參數(shù)是一個(gè)設(shè)置選項(xiàng)的對(duì)象，其中 list 屬性是一個(gè)按照 [ ['foo', 12], ['bar', 6]] 格式排列的二維數(shù)組，表示每個(gè)單詞及其權(quán)重。

WordCloud(document.getElementById('myCanvas'), {
  list: [
    ['foo', 12],
    ['bar', 6],
    // ...
  ],
  // 其他自定義選項(xiàng)
});

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

echarts-wordcloud

echarts-wordcloud 是基于 echarts.js 和 wordcloud2.js 的插件，用于在 echarts 可視化圖表中創(chuàng)建詞云。它的特點(diǎn)包括：

• 能夠和 echarts.js 完美融合，使用起來(lái)非常方便。
• 支持自定義詞云的顏色、形狀、布局和樣式等多種設(shè)置。
• 提供了靈活的數(shù)據(jù)源類(lèi)型：支持 JSON 數(shù)據(jù)和順序數(shù)組等格式，也可以使用回調(diào)函數(shù)來(lái)動(dòng)態(tài)生成數(shù)據(jù)。
• 支持事件處理和動(dòng)畫(huà)效果，可以讓詞云更加生動(dòng)有趣。

使用方式如下：

1. 在項(xiàng)目中安裝 echarts 和 echarts-wordcloud 兩個(gè)包：

npm i echarts echarts-wordcloud --save

1. 在項(xiàng)目中引入 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是一個(gè)基于 D3.js 和 HTML5 Canvas繪制輸出的開(kāi)源詞云實(shí)現(xiàn)。它的特點(diǎn)包括：

• 采用無(wú)序布局，可以通過(guò)在一個(gè)范圍內(nèi)放置文本片段來(lái)生成詞云。
• 可以使用不同的旋轉(zhuǎn)角度和字體大小將單個(gè)文本片段放置在頁(yè)面上。
• 可以使用不同的顏色和透明度更改詞云文本的外觀。
• 可以調(diào)整詞云算法以根據(jù)不同的權(quán)重對(duì)詞語(yǔ)進(jìn)行排序，使更重要的詞語(yǔ)顯示更大，不重要的詞語(yǔ)顯示更小。

使用方式如下：

1. 在終端中鍵入以下命令來(lái)安裝d3-cloud：

npm install d3-cloud

1. 安裝完成后，在項(xiàng)目中導(dǎo)入d3-cloud：

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

1. 創(chuàng)建一個(gè)容器老包含詞云

1. 在JavaScript文件中，使用以下方式處理數(shù)據(jù)并生成詞云：

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 是一個(gè)基于 React 框架的標(biāo)簽云組件，用于在應(yīng)用中呈現(xiàn)具有不同字體大小和顏色的標(biāo)簽。它的特點(diǎn)包括：

• 易用性：提供了簡(jiǎn)單易用的API，可以方便地在React項(xiàng)目中使用。
• 可定制性：提供了多種自定義選項(xiàng)，可以自定義標(biāo)簽云的顏色、大小、字體、旋轉(zhuǎn)角度等。
• 響應(yīng)式設(shè)計(jì)：支持響應(yīng)式設(shè)計(jì)，可以自適應(yīng)不同的屏幕大小。
• 支持多種數(shù)據(jù)源：支持從數(shù)組、對(duì)象、URL等多種數(shù)據(jù)源中獲取標(biāo)簽數(shù)據(jù)。

使用方式如下：

1. 在終端或命令行工具中輸入以下命令來(lái)安裝 react-tagcloud：

npm install react-tagcloud

1. 在 JavaScript 文件中，導(dǎo)入 react-tagcloud 并使用：

import ReactTagCloud from 'react-tagcloud';

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

const options = {
  //其他 options 設(shè)置
};

//渲染標(biāo)簽云

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

VueWordCloud

VueWordCloud 是一個(gè)基于 Vue.js 的詞云組件庫(kù)。它的特點(diǎn)包括：

• 支持關(guān)鍵詞權(quán)重：支持自定義關(guān)鍵詞的權(quán)重，從而可以根據(jù)關(guān)鍵詞的重要性來(lái)調(diào)整詞云的顯示效果。
• 自定義樣式：提供了多個(gè)選項(xiàng)，可以自定義詞云的樣式和顏色。
• 支持縮放：持對(duì)詞云進(jìn)行縮放和平移，從而可以查看更詳細(xì)的數(shù)據(jù)。
• 支持篩選：支持按照關(guān)鍵詞進(jìn)行篩選，從而可以快速查找感興趣的內(nèi)容。

使用方式如下：

1. 在終端中運(yùn)行以下命令來(lái)安裝 VueWordCloud：

npm install vuewordcloud

1. 在項(xiàng)目中引入 VueWordCloud 組件：

import Vue from 'vue';
import VueWordCloud from 'vuewordcloud';

Vue.component('VueWordCloud', VueWordCloud);


  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 組件的詞云選項(xiàng)，可以根據(jù)需要自定義這些選項(xiàng)。

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

react-d3-cloud

react-d3-cloud 是一個(gè)使用 d3-cloud 構(gòu)建的詞云 React 組件。

使用方式如下：

1. 在終端中運(yùn)行以下命令來(lái)安裝 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(
      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

當(dāng)前名稱(chēng)：前端如何實(shí)現(xiàn)詞云效果？
網(wǎng)站鏈接：http://m.jiaotiyi.com/article/dpdhiip.html