博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
超酷的javascript文字云/标签云效果 - D3 Cloud
阅读量:7020 次
发布时间:2019-06-28

本文共 752 字,大约阅读时间需要 2 分钟。

  hot3.png

日期:2012-10-11  来源:

超酷的javascript文字云效果 - D3 Cloud

如果你想创建漂亮的文字云或者标签云效果的话,你可以考虑使用,这是一个超棒的开源字体云效果类库,基于知名的,能够帮助你生成类似wordle.com风格的字体或者标签云效果。

这个类库使用画布来生成字体效果,整个布局算法可以异步实现,只需要设置时间块大小。并且支持动画特效。整体性能非常不错。

配置如下

var fontSize = d3.scale.log().range([10, 100]);var layout = cloud()      .size([960, 600])      .timeInterval(10)      .text(function(d) { return d.key; })      .font("Impact")      .fontSize(function(d) { return fontSize(+d.value); })      .rotate(function(d) { return ~~(Math.random() * 5) * 30 - 60; })      .padding(1)      .on("word", progress)      .on("end", draw)      .words([…])      .start();

文字,字体和字体大小,旋转和边框距离都可以自定义。包含两个事件:

  • word - 当每一个文字添加后触发
  • end - 当全部文字添加后触发

当然,支持web字体,你可以使用@font-face来设置字体风格。如果你能够应用到自己的网站中,肯定能够给你的网站增色不少!

来源:

转载于:https://my.oschina.net/gbin1/blog/83204

你可能感兴趣的文章
计蒜客 疑似病毒 (AC自动机 + 可达矩阵)
查看>>
QoS优先级详解
查看>>
【ACE】恩墨《访客》第一期嘉宾-刘盛-中国Oracle数据库领域首位ACEA
查看>>
oracle等待事件1分别用表和索引上数据的访问来产生db file scattered read等待事件...
查看>>
腾讯区块链+医疗,一场值得期待的卫生行业创新探索
查看>>
CentOS 7之Postfix部署系列 (二) CentOS网络设置
查看>>
30K 月薪运维工程师面试考什么?滴滴17年春招笔试题
查看>>
给力!新书面市:软考45分采分点梳理与难点突破——系统集成项目管理工程师...
查看>>
0成本日涨粉1000+,新媒体小白也能实操的引流方法
查看>>
权威公布:百度搜索网页标题规范
查看>>
《微软Azure云计算开发实战(2):Azure部署ASP.NET MVC 网站
查看>>
linux系统被×××后处理经历
查看>>
思科路由器开机进入 miniIOS 的原因分析
查看>>
分享ISTQB培训体验
查看>>
Android帧缓冲区(Frame Buffer)硬件抽象层(HAL)模块Gralloc的实现原理分析(3)...
查看>>
自动化部署工具PUPPET介绍
查看>>
SystemCenter2012SP1实践(7)SCVMM管理VMware
查看>>
监控AlwaysOn可用性组的运行状态
查看>>
虚拟化基础架构Windows 2008篇之10-使用WDS安装Windows 7
查看>>
“高、纯、久”当道,量子点技术能否重构电视分水岭?
查看>>