如何创建云图？

Question

我见过这些被称为标签云、任务云和云图的图表，但是谁能推荐一个纯JavaScript (请不要闪存)的库或工具来生成云图？非常感谢。

Answer 1

引用"Showcase your skillset with an interactive colorful D3.js tag cloud"的话，这是一个如何创建这样一个云的工作示例。它基于Jason Davies' cloud layout计算脚本(反过来受到Wordle的启发)，该脚本用于驱动D3.js绘制云。

​

​

您可以在下面看到嵌入的工作示例，也可以在jsfiddle中查看。

整个示例可以在https://github.com/bbottema/d3-tag-skills-cloud的GitHub上找到

First使用text和size属性定义您的云数据：

var skillsToDraw = [
    { text: 'javascript', size: 80 },
    { text: 'D3.js', size: 30 },
    { text: 'coffeescript', size: 50 },
    { text: 'shaving sheep', size: 50 },
    { text: 'AngularJS', size: 60 },
    { text: 'Ruby', size: 60 },
    { text: 'ECMAScript', size: 30 },
    { text: 'Actionscript', size: 20 },
    { text: 'Linux', size: 40 },
    { text: 'C++', size: 40 },
    { text: 'C#', size: 50 },
    { text: 'JAVA', size: 76 }
];

Next您需要使用布局脚本来计算每个单词的位置、旋转和大小：

d3.layout.cloud()
    .size([width, height])
    .words(skillsToDraw)
    .rotate(function() {
        return ~~(Math.random() * 2) * 90;
    })
    .font("Impact")
    .fontSize(function(d) {
        return d.size;
    })
    .on("end", drawSkillCloud)
    .start();

最终实现了drawSkillCloud，它执行D3绘制：

// apply D3.js drawing API
function drawSkillCloud(words) {
    d3.select("#cloud").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + ~~(width / 2) + "," + ~~(height / 2) + ")")
        .selectAll("text")
        .data(words)
        .enter().append("text")
        .style("font-size", function(d) {
            return d.size + "px";
        })
        .style("-webkit-touch-callout", "none")
        .style("-webkit-user-select", "none")
        .style("-khtml-user-select", "none")
        .style("-moz-user-select", "none")
        .style("-ms-user-select", "none")
        .style("user-select", "none")
        .style("cursor", "default")
        .style("font-family", "Impact")
        .style("fill", function(d, i) {
            return fill(i);
        })
        .attr("text-anchor", "middle")
        .attr("transform", function(d) {
            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function(d) {
            return d.text;
        });
}

这是最基本的。您可以影响大小和角度用于挑选随机旋转，以及一些填充之间的单词，如果你愿意和颜色填充，但这些是基本的！

在代码片段(或jsfiddle)中查看它：

​

// First define your cloud data, using `text` and `size` properties:

var skillsToDraw = [
	{ text: 'javascript', size: 40 },
	{ text: 'D3.js', size: 15 },
	{ text: 'coffeescript', size: 25 },
	{ text: 'shaving sheep', size: 25 },
	{ text: 'AngularJS', size: 30 },
	{ text: 'Ruby', size: 30 },
	{ text: 'ECMAScript', size: 15 },
	{ text: 'Actionscript', size: 10 },
	{ text: 'Linux', size: 20 },
	{ text: 'C++', size: 20 },
	{ text: 'C#', size: 25 },
	{ text: 'JAVA', size: 38 },
  // just copy data and reduce size, else the cloud is a little boring
	{ text: 'javascript', size: 40 },
	{ text: 'D3.js', size: 15 },
	{ text: 'coffeescript', size: 25 },
	{ text: 'shaving sheep', size: 25 },
	{ text: 'AngularJS', size: 30 },
	{ text: 'Ruby', size: 30 },
	{ text: 'ECMAScript', size: 15 },
	{ text: 'Actionscript', size: 10 },
	{ text: 'Linux', size: 20 },
	{ text: 'C++', size: 20 },
	{ text: 'C#', size: 25 },
	{ text: 'JAVA', size: 38 },
	{ text: 'javascript', size: 40 },
	{ text: 'D3.js', size: 15 },
	{ text: 'coffeescript', size: 25 },
	{ text: 'shaving sheep', size: 25 },
	{ text: 'AngularJS', size: 30 },
	{ text: 'Ruby', size: 30 },
	{ text: 'ECMAScript', size: 15 },
	{ text: 'Actionscript', size: 10 },
	{ text: 'Linux', size: 20 },
	{ text: 'C++', size: 20 },
	{ text: 'C#', size: 25 },
	{ text: 'JAVA', size: 38 }
];

// Next you need to use the layout script to calculate the placement, rotation and size of each word:

    var width = 500;
    var height = 500;
    var fill = d3.scale.category20();

    d3.layout.cloud()
    	.size([width, height])
    	.words(skillsToDraw)
    	.rotate(function() {
    		return ~~(Math.random() * 2) * 90;
    	})
    	.font("Impact")
    	.fontSize(function(d) {
    		return d.size;
    	})
    	.on("end", drawSkillCloud)
    	.start();

// Finally implement `drawSkillCloud`, which performs the D3 drawing:

    // apply D3.js drawing API
    function drawSkillCloud(words) {
    	d3.select("#cloud").append("svg")
    		.attr("width", width)
    		.attr("height", height)
    		.append("g")
    		.attr("transform", "translate(" + ~~(width / 2) + "," + ~~(height / 2) + ")")
    		.selectAll("text")
    		.data(words)
    		.enter().append("text")
    		.style("font-size", function(d) {
    			return d.size + "px";
    		})
    		.style("-webkit-touch-callout", "none")
    		.style("-webkit-user-select", "none")
    		.style("-khtml-user-select", "none")
    		.style("-moz-user-select", "none")
    		.style("-ms-user-select", "none")
    		.style("user-select", "none")
    		.style("cursor", "default")
    		.style("font-family", "Impact")
    		.style("fill", function(d, i) {
    			return fill(i);
    		})
    		.attr("text-anchor", "middle")
    		.attr("transform", function(d) {
    			return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
    		})
    		.text(function(d) {
    			return d.text;
    		});
    }

// optional: set the viewbox to content bounding box (zooming in on the content, effectively trimming whitespace)

    var svg = document.getElementsByTagName("svg")[0];
    var bbox = svg.getBBox();
    var viewBox = [bbox.x, bbox.y, bbox.width, bbox.height].join(" ");
    svg.setAttribute("viewBox", viewBox);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdn.rawgit.com/jasondavies/d3-cloud/v1.2.1/build/d3.layout.cloud.js"></script>

<div id="cloud"></div>

​

您可以在"Showcase your skillset with an interactive colorful D3.js tag cloud"上阅读更深入的介绍和更高级的方法。在https://github.com/bbottema/d3-tag-skills-cloud上签出一个示例项目。

Answer 2

我会去看看时代周刊。使用jQuery，这是github页面：

http://github.com/stef/timecloud

使用jQuery的另一个很好的例子是DynaCloud：

http://johannburkard.de/blog/programming/javascript/dynacloud-a-dynamic-javascript-tag-keyword-cloud-with-jquery.html

Answer 3

下面这些基于D3的例子也值得一看：

• https://github.com/jasondavies/d3-cloud
• http://bl.ocks.org/yaph/5913997