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

本文主要是介绍超酷的javascript文字云/标签云效果 - D3 Cloud，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

日期：2012-10-11  来源：GBin1.com

在线演示

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

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

配置如下

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来设置字体风格。如果你能够应用到自己的网站中，肯定能够给你的网站增色不少！

来源：超酷的javascript文字云/标签云效果 - D3 Cloud

这篇关于超酷的javascript文字云/标签云效果 - D3 Cloud的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---