D3-Cloud是一個開源的詞雲實現，基於D3.js，使用HTML5 Canvas繪制輸出，因為采用異步的方式處理，所以表現性能良好。
項目主頁：https://www.jasondavies.com/wordcloud/
下載地址：https://github.com/jasondavies/d3-cloud
1.首先需要在HTML文件的<head>標簽中導入d3.js和d3.layout.cloud.js兩個js文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="d3.min.js"></script>
<script src="d3.layout.cloud.js"></script>
</head>
<body>
<div id="d3_cloud"></div>
<script>
var words_list = [
{text:"互聯網醫療", size:'20'},
{text:"基因檢測", size:'30'},
{text:"醫療服務", size:'26'},
{text:"再生醫學", size:'30'},
{text:"生物科技", size:'26'},
{text:"醫葯", size:'34'},
{text:"免疫治療", size:'16'},
{text:"體外診斷", size:'20'},
{text:"醫療設備", size:'30'},
{text:"醫療影像", size:'24'},
{text:"腦科學", size:'20'},
];
var fill = d3.scale.category20(); //輸出20種類別的顏色 ---顏色比例尺
var layout = d3.layout.cloud()
.size([360, 200]) //size([x,y]) 詞雲顯示的大小
.words(words_list)
.padding(5)
.rotate(function() { return ~~(Math.random() * 2) * 0; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw);
layout.start();
function draw(words) {
d3.select("#d3_cloud").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-2, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
//word cloud layout 詞雲布局，d3布局中為詞雲設立的單獨的一種布局方式
//d3.layout.cloud() 構造一個詞雲的布局實例
//on(type,listener) 注冊特定的listener來接收布局中特定類型的event。
//目前只有 word和end這兩種event是被支持的。
//word這種event在該布局完成對每一個word的布局時被調度。
//end這種活動在改布局完成對所有的words的布局時被調度。
//注冊的listener通過兩個參數被調度：
//被成功布局的單詞數組
//以[{x0,y0},{x1,y1}]形式為界限，代表words范圍 a bounds object of the form [{x0, y0}, {x1, y1}] representing the extent of the placed objects.
//
//start 布局算法 初始化單詞數組上的各種參數，並且從最大的單詞開始布局單詞，
//從矩形區域的中間開始，每一個單詞在布局時都要檢測是否與先前已經布局好的單詞位置沖突。
//一旦檢測到沖突，該算法會沿着螺旋線重新布局該單詞。
//如果一個單詞不能在沿着螺旋線的任何地方被布局，該單詞最終將不會顯示在詞雲圖上，該問題可能在后續版本中被解決。
//stop() 停止布局算法
// timeInterval([time]) 布局時通過setInterval來避免瀏覽器的event loop被鎖住。
//words([words array].map(function(d)(return{text:d;size:某一個數值}))
//為words數組中的每一個word分配一個字體大小
</script>
</body>
</html>