WordCloud（词云）-JavaScript
在中已经分享了⽤ Python 创建词云了。接下来继续总结其他创建词云的⽅法。
>> Create Word Cloud via JavaScript
JavaScript 可以借助 的 来⽣成词云。
1) 下载 d3, d3-cloud 及其相关⽂件，并在 HTML ⽂件中引⽤。
<script src="dist/d3.v3.min.js"></script>
<script src="dist/d3.layout.cloud.js"></script>
<script src="dist/colorbrewer.v1.min.js"></script>
2) 准备⽂本。
我们再次使⽤上次保存的 Word 的⽂本。
3) ⽤ HTML 写⼀个简单的 Web Page，让我们可以做⼀些简单的交互，例如选择 *.txt ⽂件，点击⽣成图形，保存图形等等。
<div role="main">
<input type="file" id="txtFile" accept=".txt" single>
<button id="btnCreate">Create</button>
<button id="btnSave" disabled>Save</button>
<div id="svgBox"></div>
</div>
完成后可以⽤浏览器打开这个 Web Page 看看。
4) 接下来我们就可以⽤ JavaScript 去实现这些控件的功能了。和 Python 不同，JavaScript 不能⾃动分词和设置停⽤词，所以我们需要4-a) 读取 *.txt ⽂件： readTXTFile
4-b) 分词：generateWordList
4-c) 重头戏，画 word cloud：drawWordCloud。根据 d3-cloud 给出的API设置字体颜⾊，字体⼤⼩，图形的⼤⼩等等。
//Example for Step 3
var layout = d3.layout.cloud() //构造词云实例
.size([width, height])
.words(
arrWord.map(function(d) {
var index = arrWord.indexOf(d);
return {text: d, size: arrWeight[index] * sizeFactor};
})
)
.padding(5)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font(fontFamily)
.fontSize(function(d) { return d.size; })
svg canvas.spiral("rectangular")
.on("end", draw) //所有词语放置完成后运⾏ draw 函数
.start();
4-d). 保存图形：saveSVGToPNG
//Save svg as png file
var svg = document.querySelector("svg");
var svgData = new XMLSerializer().serializeToString(svg);
var svgSize = BoundingClientRect();
var canvas = ateElement("canvas");
canvas.width = svgSize.width;
canvas.height = svgSize.height;
var ctx = Context("2d");
var img = ateElement("img");
img.setAttribute('crossOrigin', 'anonymous');
img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData));
ctx.drawImage(img, 0, 0);
var imgDataURL = DataURL("image/png");
console.DataURL("image/png"));
$("body").append("<a id='hiddenLink' href='" + imgDataURL + "' style='display:none;' download>Download Pic</a>");
$("#hiddenLink")[0].click();
$("#hiddenLink").remove();
};
>> Notes
1) 这个例⼦还没有实现设置停⽤词的功能，所以图形中还包括了很多⽆意义的词语，例如 the, a, of, in 等等。如果你看完这篇博客后有兴趣继续玩玩，可以⾃⼰加个 function 实现这个功能。
简单的⽅法就是设置两个 Object, ⼀个装词语，⼀个装停⽤词。现在词语中读取第⼀个词，并在停⽤词中查。如果是停⽤词就丢掉，然后读取第⼆个词，如此类推。
2) 到⽬前为⽌，将 svg 保存为其他图⽚格式 （如 *.png）只适⽤于 Chrome 浏览器和 FireFox 浏览器。曾经花了很多时间去搜索和研究都没有到在 IE 怎样将 svg 保存成其他图⽚格式。如果有好⼼⼈知道，也和我分享⼀下吧。Thanks！
>> Sample Code

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。