如何创建云图？

Question

我已经看到这些图表被称为标签云，任务云和云图，但是有人可以推荐一个纯JavaScript（没有Flash请求）库或实用程序，可以生成云图吗？非常感谢。

Answer 1

对于独立于库的JavaScript解决方案，请检查：

• tagCloud：JavaScript TagCloud Generator

我上传了2个演示：

• Basic
• Search

Answer 2

我会查看timecloud。使用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

Answer 4

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

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

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

首先使用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 }
];

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

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 5

您可以使用CMS和css轻松完成此操作

<div class=".cloud">
   <a href="#" class="weight-1">Cloud</a>
   <a href="#" class="weight-2">Cloud</a>
</div>

的CSS：

.cloud .weight-1 { font-size: 10px; }
.cloud .weight-2 { font-size: 15px; }

您的CMS会生成权重并应用适当的样式。

Answer 6

此任务有i2ui：

    <div data-i2="css:[{fontSize:'8px',color:'#888888'},{fontSize:'30px',color:'#000000'}]">
        <span data-i2="rate:1">Alaska</span>
        <span data-i2="rate:4">Arizona</span>
        <span data-i2="rate:7">Arkansas</span>
        <span data-i2="rate:12">California</span>
        <span data-i2="rate:5">Colorado</span>
        <span data-i2="rate:8">Connecticut</span>
        <span data-i2="rate:3">Delaware</span>
        <span data-i2="rate:6">Florida</span>
    </div>

加载HTML后调用JavaScript：

i2.emph();

请参阅演示：http://jsfiddle.net/7GcKT/4/

Answer 7

到目前为止，推荐的一个@CMS正在为我工​​作，但是这里的FYI还有两个我刚才看过的，但没试过。

• http://code.google.com/p/jquery-tagcloud/（有一个基本的api doc）
• http://plugins.jquery.com/project/TagCloud

Answer 8

我最近发现了这个jQuery库：http://addywaddy.github.io/jquery.tagcloud.js/