Word Cloud - 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 cloud history.txt 的文本。
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; })
.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 = svg.getboundingclientrect();
var canvas = document.createelement("canvas");
canvas.width = svgsize.width;
canvas.height = svgsize.height;
var ctx = canvas.getcontext("2d");
var img = document.createelement("img");
img.setattribute('crossorigin', 'anonymous');
img.setattribute("src", "data:image/svg+xml;base64," + btoa(svgdata));
img.onload = function() {
ctx.drawimage(img, 0, 0);
var imgdataurl = canvas.todataurl("image/png");
console.log(canvas.todataurl("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！