D3.js V5.0 词云图（标签云）

#词云图
需要安装d3-cloud 插件。
https://www.npmjs.com/package/d3-cloud

实现代码如下：

  const width = 500;const height = 500;const color = d3.scaleOrdinal(d3.schemeCategory10);const svg = d3.select(id).append('svg').attr('width', width).attr('height', height);const layout = cloud().size([500, 500]).words(data.map(function(d) {return { text: d, size: 10 + Math.random() * 90 };})).padding(5).rotate(function() {return Math.random() * 45;}).font('Impact').fontSize(function(d) {return d.size;}).on('end', draw);layout.start();function draw(words) {svg.append('g').attr('transform', `translate(${layout.size()[0] / 2},${layout.size()[1] / 2})`).selectAll('text').data(words).enter().append('text').attr('fill', (_, i) => color(i)).style('font-size', function(d) {return `${d.size}px`;}).style('font-family', 'Impact').attr('text-anchor', 'middle').attr('transform', function(d) {return `translate(${[d.x, d.y]})rotate(${d.rotate})`;}).text(function(d) {return d.text;});}

数据结构：
[
“Web2.0”,
“JavaScript”,
“HTML”,
“CSS”,
“D3”,
“SVG”,
“React”,
“Vue”
]
运行截图：

优缺点：
优点：使用这个插件可以很快速的得到想要的图表。
缺点：做数据可视化需要一个更新的过程，可以通过刷新组件来重新渲染或者(请大佬指教)。
本例子实现较为简单。单词位置较为随机，只通过字体大小来进行突出重点，不是很理想的类型。

D3.js V5.0 词云图（标签云）相关推荐

D3.js v5.0 旭日图
数据结构: {"name": "flare","children": [{"name": "",&q ...
好用！强大的词云图文字云制作神器！可永久使用，快速出图，支持自动分词关键词筛选词频统计！
可永久使用的词云图文字云一键制作软件,快速出图,支持自动分词关键词筛选词频统计! 软件名称:MagicCloud词云图制作软件(简化版.标准版,升级版) 目前仅支持Windows电脑安装,软件安装大小 ...
d3.js v5 饼状图（加载动画、悬浮动画、图注以及悬浮提示框）
实现的效果大概是这样: 实现代码如下: <html><body></body><style>div{background: #F2F4FF;width: ...
css标签3d,超酷的js+css3实现的3D标签云特效
此作品是一款超酷的3D标签云核心功能代码如下: function doPosition(){ var l = oDiv.offsetWidth / 2; var t = oDiv.offsetHei ...
d3.js v5入门之——比例尺
比例尺是可视化中一项基本任务的便捷抽象:将抽象数据的维映射到视觉表示.尽管最常用于对定量数据进行位置编码,例如将以米为单位的测量值映射到散点图中点的像素位置,但刻度实际上可以表示任何位置编码,例如发散 ...
JS自写带描述标签云
这个版本是随机排序,原理是随机颜色.随机字号,首尾三行逐行缩进形成椭圆形构造. 效果预览: HTML部分: <div id="tagCloud" style="wi ...
Vue中引入使用 D3.js
Vue中引入使用 D3.js 1. D3.js 学习文档 D3.js 中文网 D3.js 入门教程 D3.js v5版入门教程 d3.js API中文手册-[看云] d3.layout (布局)-[ ...
添加分类、标签云（球状）、彩色标签
添加分类页面 1.新建页面 $ cd your-hexo-site $ hexo new page categories 在终端窗口下,定位到 Hexo 站点目录下.使用 hexo new page ...
D3.js 力导向图来处理拓扑图
记录一点碰到的问题和解决方案.感觉国内关于D3.js 4.0版本的相关资料还是少. 力导向图布局 D3一种布局的方式,可以将你nodes links的节点数据转换成可以绘制的坐标点数据,然后通过svg ...

D3.js V5.0 词云图（标签云）

D3.js V5.0 词云图（标签云）相关推荐

最新文章

热门文章