云的形态、水中气泡内压力分布气泡云图片 _气泡

在曾经的博客时代，标签云十分流行，通过一堆大小不同的文字标示出相关主题的热度。气泡云图与此有类似的目的，通过气泡的大小展示相关主题的宏观对比。
气泡云图与气泡图有很大的差别，气泡图需要三个维度，而气泡云图只需要两个变量：主题和主题对应的数值。
这里是一个气泡云图的示例，用于展示某部门员工的业绩（是不是感觉很直观!!!）：

文章插图
常用的ECharts、Highcharts都没有提供这种图表展现形式（或者是我没找到？）。
这个图表使用了D3进行制作，D3全称为Data-Driven Document，是一个提供数据可视化的Javascript库，它实际上不进行图表的渲染，只是将数据与页面元素进行连接。
下边就来看如何实现：
1、首先定义一个html页面
在页面中需要引用d3库，这里直接添加到head中了。
D3 Bubble Chart2、然后就是重点部分了
通过调用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代表第几个tspanreturn 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'; }); //圆的颜色理解了相关脚本，用起来还是很简单的。

云的形态、水中气泡内压力分布 气泡云图片

云的形态、水中气泡内压力分布气泡云图片