首页 >> 大全

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

2022-12-04 大全 156 作者:考证青年

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

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

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

使用D3制作专业的”气泡云图”

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

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

下边就来看如何实现:

1、首先定义一个html页面

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

D3 Bubble Chart

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代表第几个tspanreturn 8 + i * 18; }).text(function(d) { return d; }); // 文字的内容 // 鼠标划过显示node.append("title").text(function(d) { return d.name+"\n"+d.size; });})();

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

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

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

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

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

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,谢谢。

tags: 云图

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了