在曾经的博客时代，标签云十分流行，通过一堆大小不同的文字标示出相关主题的热度。气泡云图与此有类似的目的，通过气泡的大小展示相关主题的宏观对比。
气泡云图与气泡图有很大的差别，气泡图需要三个维度，而气泡云图只需要两个变量：主题和主题对应的数值。
这里是一个气泡云图的示例，用于展示某部门员工的业绩（是不是感觉很直观!!!）：
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'; }); //圆的颜色
理解了相关脚本，用起来还是很简单的。
点击这里下载完整示例。
关键字: 气泡云图
发表评论
相关文章
国内AI资源汇总，AI聊天、AI绘画、AI写作、AI视频、AI设计、AI编程、AI音乐等，国内顺畅访问，无需科学上网。
扫码或点击进入：萤火AI大全
文章分类
最新评论