波斯码BOSSMA Information Technology

如何制作漂亮的气泡云图

发布时间:2018年1月27日 / 分类:JavaScript / 次浏览 / 评论

在曾经的博客时代,标签云十分流行,通过一堆大小不同的文字标示出相关主题的热度。气泡云图与此有类似的目的,通过气泡的大小展示相关主题的宏观对比。

气泡云图与气泡图有很大的差别,气泡图需要三个维度,而气泡云图只需要两个变量:主题和主题对应的数值。

这里是一个气泡云图的示例,用于展示某部门员工的业绩(是不是感觉很直观!!!):

ECharts、Highcharts都没有提供这种图表展现形式(或者是我没找到?)。

这个图表使用了D3进行制作,D3全称为Data-Driven Document,是一个提供数据可视化的Javascript库,它实际上不进行图表的渲染,只是将数据与页面元素进行连接。

下边就来看如何实现:

1、首先定义一个html页面

在页面中需要引用d3库,这里直接添加到head中了。

<html>
<head>
<script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script>
</head>
<body>
<h1>D3 Bubble Chart</h1>
<section id="graph"></section>
</body>
</html>

2、然后就是重点部分了

通过调用d3 API将测试数据绘制成图表,这里尽量注释详细点。

(function() {

	// 要展现的数据,name为主题名称,className为气泡的样式,size将用于气泡大小
	var dataSet = [];
	dataSet.push({name: '张三', className: 'item0', size: 2540});
	dataSet.push({name: '李四', className: 'item1', size: 1234});
	dataSet.push({name: '王五', className: 'item2', size: 456});
	dataSet.push({name: '猴六', className: 'item3', size: 200});
	dataSet.push({name: '姓赵的', className: 'other', size: 980});

	// 将数据包装下层次
	var json = {children: dataSet}
  
	// 图形区域大小
	var diameter = 600;

	// 在id=graph的section创建SVG区域
	var svg = d3.select('#graph').append('svg')
					.attr('width', diameter)
					.attr('height', diameter);

	// 用递归的圆-包生成一个层次布局,建议取消sort注释看看
	var bubble = d3.layout.pack()
				.size([diameter, diameter])
				.value(function(d) {return d.size;})
				// .sort(function(a, b) {
				// 	return -(a.value - b.value)
				// }) 
				.padding(3);

	// 计算包布局并返回节点数组
	var nodes = bubble.nodes(json)
						.filter(function(d) { 
							return !d.children; 
						});

	// 绑定气泡元素和数据
	var vis = svg.selectAll('g').data(nodes);
	
	// 定义气泡
	var node = vis.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

	// 画气泡(圆圈)
	node.append("circle")
      .attr("r", function(d) { return d.r; }) //圆的半径
	  .attr('class', function(d) { return d.className; }); //圆的颜色
     
	// 设置气泡(圆圈)上的文字
	node.append("text")
	.selectAll("tspan") // text下的文字用tspan包裹,这里将创建两个
    .data(function(d) { return [d.name,d.size]; }) // text下的两行文字数据:主题名称和数据大小
    .enter().append("tspan") // 这里会创建两个tspan
	.attr("x", function(d, i) { // 文字的水平位置,大代表当前tspan文字内容
		if(isNaN(d)){
			return 0-(d.length/2)*12; 
		}else{
			return 0-(d.toString().length/2)*6; // 数字字符的宽度短一些
		}
	})
	.attr("y", function(d, i) { // 文字的垂直位置,i代表第几个tspan
		return 8 + i * 18; 
	})
	.text(function(d) { return d; }); // 文字的内容
  
	// 鼠标划过显示
	node.append("title")
	.text(function(d) { return d.name+"\n"+d.size; });
})();

这里使用了一些静态测试数据,根据自己的需求修改dataSet就可以了。

数据中定义了一个className项,这个主要用于定义气泡的颜色,对于动态的数据,特别是数据量不好预估的情况,可以使用动态计算色值的方法,或者循环、随机从一组色值中选取。

绘制气泡的部分也可以增加直接设置气泡颜色的脚本,比如:

// 画气泡(圆圈)
	node.append("circle")
      .attr("r", function(d) { return d.r; }) //圆的半径
	  .style("fill", function(d) { return '#aabbcc'; }); //圆的颜色

 

理解了相关脚本,用起来还是很简单的。

点击这里下载完整示例

 

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯码,原文地址《如何制作漂亮的气泡云图

关键字:

建议订阅本站,及时阅读最新文章!
【上一篇】 【下一篇】

发表评论