结合underscore-min.js，和D3.js 绘制HTML关键词随机分布
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="./js/underscore.js"></script> <script type="text/javascript" src="http://t.datastory.com.cn/resources/js/lib/d3.v3.min.js?version=0.2.22"></script> <script type="text/javascript" src="http://t.datastory.com.cn/resources/js/lib/d3.layout.cloud.js?version=0.2.22"></script> </head> <body> <div id="keywordDist" style="400px;height:280px;"></div> </body> </html> <script> //关键词分布 frepkeywordstat(); function frepkeywordstat(){ if (!$.support.leadingWhitespace) { $("#keywordDist").html("请使用Chrome浏览器以获得最佳浏览体验"); return; } var lvalues = []; var keyword = "泽泽$1|文晖$2"; if(keyword && keyword.length){ var ls = keyword.split("|"); if(ls==null||ls.length<=0){ $("#keywordDist").html('<div style="margin-top: 140px;margin-left: 180px;">暂无数据...</div>'); return; } $.each(ls, function(key, value){ var items = value.split("$"); if(items==null||items.length<2){ return true; } var p = {}; if(items.length == 2){ p.text = items[0]; p.size = items[1]; lvalues.push(p); }else if(items.length == 3){ p.text = items[0]; p.size = items[2]; lvalues.push(p); } if(lvalues.length >= 25){ return false; } }); if(!lvalues.length){ $("#keywordDist").html('<div style="margin-top: 140px;margin-left: 180px;">暂无数据...</div>'); return; } }else{ $("#keywordDist").html('<div style="margin-top: 140px;margin-left: 180px;">暂无数据...</div>'); return; } lvalues = _.sortBy(lvalues, function(o1){return parseInt(o1.size)}); var scale = d3.scale.linear() .domain([parseInt(lvalues[0].size), parseInt(lvalues[lvalues.length-1].size)]) .range([20,45]); $("#keywordDist").html(""); d3.layout.cloud().size([420, 280]) .words(lvalues) .rotate(function() { return Math.ceil(Math.random()*40)-20; }) .font("Impact") .fontSize(function(d) { return scale(parseInt(d.size))}) .on("end", draw) .start(); } function draw(words) { var fill = d3.scale.category20(); d3.select("#keywordDist").append("svg") .attr("width", 420) .attr("height", 280) .append("g") .attr("transform", "translate(200, 160)") .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; }) .style("opacity", 1e-6) .transition() .duration(1000) .style("opacity", 1); } </script>