Word Cloud - JavaScript

程序员文章站 2022-06-19 18:21:05

在 "上一篇" 中已经分享了用 Python 创建词云了。接下来继续总结其他创建词云的方法。 Create Word Cloud via JavaScript JavaScript 可以借助 "d3 函数库" 的 "d3 cloud 插件" 来生成词云。 1) 下载 d3, d3 cloud 及其相 ......

在中已经分享了用 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 看看。
Word Cloud - JavaScript

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();
    };

Word Cloud - JavaScript