草庐IT

前端如何实现词云效果？

CUGGZ 2023-03-28 原文
今天来分享 6 个超实用的词云库，以快速实现词云效果！

wordcloud2.js

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

  • 可以在浏览器和 Node.js 环境下运行。
  • 支持文本颜色、字体大小、旋转等多种自定义选项。
  • 可以生成 SVG 矢量图形，从而支持高分辨率或放大后不失真。
  • 支持灵活的数据源类型：使用数组、JSON 数据、URL 或回调函数来提供词频数据。
使用方式如下：

  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 可视化图表中创建词云。它的特点包括：

  • 能够和 echarts.js 完美融合，使用起来非常方便。
  • 支持自定义词云的颜色、形状、布局和样式等多种设置。
  • 提供了灵活的数据源类型：支持 JSON 数据和顺序数组等格式，也可以使用回调函数来动态生成数据。
  • 支持事件处理和动画效果，可以让词云更加生动有趣。
使用方式如下：

  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 框架的标签云组件，用于在应用中呈现具有不同字体大小和颜色的标签。它的特点包括：

  • 易用性：提供了简单易用的API，可以方便地在React项目中使用。
  • 可定制性：提供了多种自定义选项，可以自定义标签云的颜色、大小、字体、旋转角度等。
  • 响应式设计：支持响应式设计，可以自适应不同的屏幕大小。
  • 支持多种数据源：支持从数组、对象、URL等多种数据源中获取标签数据。
使用方式如下：

  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

前端云spanstylecolor开发$前端词云效果

有关前端如何实现词云效果？的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  4. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  5. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  6. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  7. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  8. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  9. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  10. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

随机推荐