HTML5画布下js的文字云/标签云效果-D3 Cloud

如果你想创建漂亮的文字 云 或者 标签云效果的话，你可以考虑使用D3-Cloud，这是一个超棒的开 源 字体云效果javascript类库，基于知名的D3.js，能够帮助你 生成类 似wordle .COM 风格的字体或者标签云效果。
这个类库使用HT ML 5 画布 来生成字体效果，整个布局算法可以异步实现，只需要设置时间块大小。并且支持动画特效。整体性能非常不错。

配置如下

 VAR  fontSize = d3.scale. LOG ().range([10, 100]);

var layout = cloud()
      .size([960, 600])
      .tim ei nterval(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",  PR ogress)
      .on("end", draw)
      .wo rds ([…])
      .start();

复制代码
文字，字体和字体大小，旋转和边框 距离 都可以自定义。包含两个事件：

word - 当每一个文字添加后触发

end - 当全部文字添加后触发

当然，支持web字体，你可以使用@font-face来设置字体风格。如果你能够应用到自己的网站中，肯定能够给你的网站增色不少！
查看演示：http://HdhCmsTestjasondavies测试数据/wordcloud/ # http%3A%2F%2Fen.wiki PE dia. org %2Fwiki%2F%7Bword%7D= html5cn

总结

以上是 为你收集整理的 HTML5画布下js的文字云/标签云效果-D3 Cloud 全部内容，希望文章能够帮你解决 HTML5画布下js的文字云/标签云效果-D3 Cloud 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于HTML5画布下js的文字云/标签云效果-D3 Cloud的详细内容...