qq 反应- 字云
简单回放 + D3 有强大特性的单词云组件. 使用 d3-cloud 设置.
安装
npm install @cyberblast/react-wordcloud
请注意: react-wordcloud 需求 react^16.13.0 作为同伴的依赖.
使用
简单
import React from 'react';
import ReactWordcloud from '@cyberblast/react-wordcloud';
import 'tippy.js/dist/tippy.css';
import 'tippy.js/animations/scale.css';
const words = [
{
text: 'told',
value: 64,
},
{
text: 'mistake',
value: 11,
},
{
text: 'thought',
value: 16,
},
{
text: 'bad',
value: 17,
},
]
function SimpleWordcloud() {
return <ReactWordcloud words={words} />
}
默认, ReactWordcloud 被配置为启用了动画工具提示,并且需要 CSS 来进行造型。 Tippy在以上资源中提供基础样式,或者您可以创建自己的.
厨房下沉
一个显示各种特性(召回,选项,大小)的例子.
const callbacks = {
getWordColor: word => word.value > 50 ? "blue" : "red",
onWordClick: console.log,
onWordMouseOver: console.log,
getWordTooltip: word => `${word.text} (${word.value}) [${word.value > 50 ? "good" : "bad"}]`,
}
const options = {
rotations: 2,
rotationAngles: [-90, 0],
};
const size = [600, 400];
const words = [...];
function MyWordcloud() {
return (
<ReactWordcloud
callbacks={callbacks}
options={options}
size={size}
words={words}
/>
);
}
实例
查看所有记录的示例和图片库 react-wordcloud 应用程序在 https://react-wordcloud.netlify.com/ 互联网档案馆的存檔,存档日期2013-12-22。 。 。 .
您也可以在本地运行示例 :
git clone [email protected]:chrisrzhou/react-wordcloud
cd react-wordcloud
npm install && npm run docs
没有道具
响应
可配置选项
回电
文字云生成器
使用此单词云生成器创建单词云 : https://wordcloud-generator.netlify.com/ 互联网档案馆的存檔,存档日期2013-12-21
支持的特性 :
- 编辑并上传文本输入
- 各种 NLP 特性( stopwords, ngrams)
- 单词云配置
- 导出/保存/共享单词云
捐款
密码写在 typescript,并用 xo,并与 microbundle. 实例和文件与 docz。 。 。 .
随心所欲地通过提交拉动请求来贡献.