使用D3实现词云效果

简介

D3.js是一个功能非常强大的数据可视化js框架。比起echarts，定制性更强，插件丰富。现在以一个词云插件为例做简单使用。
词云插件地址

效果：

代码

// 需要使用V3版本
var fill = d3.scale.category20();var layout = d3.layout.cloud().size([500, 500])  // 宽高.words(["Hello", "world", "normally", "you", "want", "more", "words","than", "this"].map(function(d) {return {text: d, size: 10 + Math.random() * 90};}))  // 数据.padding(5)  // 内间距.rotate(function() { return ~~(Math.random() * 2) * 90; }).font("Impact").fontSize(function(d) { return d.size; }).on("end", draw);layout.start();// 渲染
function draw(words) {d3.select("#vis").append("svg").attr("width", layout.size()[0]).attr("height", layout.size()[1]).append("g").attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")").selectAll("text").data(words).enter().append("text").style("font-size", function(d) { return d.size + "px"; }).style("font-family", "Impact").style("fill", function(d, i) { return fill(i); }).attr("text-anchor", "middle").attr("transform", function(d) {return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";}).text(function(d) { return d.text; });
}

源码

GitHub