Word Cloud (詞雲) - JavaScript

時間 2019-11-08

標籤 word cloud javascript 欄目 Microsoft Office 简体版

原文原文鏈接

在上一篇中已經分享了用 Python 建立詞雲了。接下來繼續總結其餘建立詞雲的方法。javascript

>> Create Word Cloud via JavaScript

JavaScript 能夠藉助 d3 函數庫的 d3-cloud 插件來生成詞雲。html

1) 下載 d3, d3-cloud 及其相關文件，並在 HTML 文件中引用。java

<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) 準備文本。git

咱們再次使用上次保存的 Word Cloud History.txt 的文本。github

3) 用 HTML 寫一個簡單的 Web Page，讓咱們能夠作一些簡單的交互，例如選擇 *.txt 文件，點擊生成圖形，保存圖形等等。canvas

<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 不能自動分詞和設置停用詞，因此咱們須要app

4-a) 讀取 *.txt 文件： readTXTFiledom

4-b) 分詞：generateWordListsvg

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