本文共 3635 字，大约阅读时间需要 12 分钟。

���[���������](https://www.cnblogs.com/yukiwu/p/10967037.html)��������������������� Python ��������������������������������������������������������������������� ##### >> Create Word Cloud via JavaScript

---

JavaScript ������������ ��� ������������������

1. ������ d3, d3-cloud ��������������������������� HTML ������������������

2. ���������������

��������������������������������� Word Cloud History.txt ������������

3. ��� HTML ������������������ Web Page��������������������������������������������������������� *.txt ���������������������������������������������������

   
               
                          
    Create    
    Save              
    
   

��������������������������������������� 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("Download Pic");        $("#hiddenLink")[0].click();        $("#hiddenLink").remove();    };

##### >> Notes

---

1. ������������������������������������������������������������������������������������������������������������������ the, a, of, in ��������������������������������������������������������������������������������� function ���������������������

��������������������������������� Object, ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

2. ��������������������� svg ��������������������������� ������ *.png��������������� Chrome ������������ FireFox ������������������������������������������������������������������������ IE ��������� svg ������������������������������������������������������������������������������������Thanks���

##### >> Sample Code

---

##### >> Related Blogs

---

1. [Word Cloud (������) - Python](https://www.cnblogs.com/yukiwu/p/10967037.html)2. [Word Cloud (������) - R](https://www.cnblogs.com/yukiwu/p/10969250.html)3. [Word Cloud (������) - Matlab](https://www.cnblogs.com/yukiwu/p/10971998.html)