如何创建云图表?[关闭]

对于库独立的javascript解决方案,请检查:

• tagCloud :javascript TagCloud生成器

我上传了2个演示:

• Basic
• Search

我会查看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

值得一看这些基于d3的例子:

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

引用 "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;
        });
}

这是最基本的。您可以影响大小和用于选择随机旋转的角度,以及单词之间的一些填充(如果愿意)和颜色填充,但这些都是基础!

在工作中看到它的片段(或 杰西德 ):

// 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>

您可以阅读更深入的介绍,然后阅读更高级的方法。 “使用交互式彩色d3.js标记云展示您的技能集” . 在处签出示例项目 https://github.com/bbottema/d3-tag-skills-cloud .

你可以用你的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将生成权重并应用适当的样式。

有 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/

到目前为止,推荐的一个@cms正在为我工作,但仅供参考,这里还有两个我刚刚看了,但没有试用。

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

我最近找到了这个jquery库: http://addywaddy.github.io/jquery.tagcloud.js/