D3.js 中Bubble Chart详解
来源:互联网 发布:生产实时数据库 编辑:程序博客网 时间:2024/05/21 22:59
Bubble Chart
今天来聊一聊美丽浪漫的气泡图~
气泡图是一种显示三维数据的图表。 每个具有相关数据的三元组(v1,v2,v3)的实体都被绘制成一个气泡,它通过气泡的x,y位置表示了三元组中的两个vi值,而第三个通过它的大小表示。 气泡图可以被认为是散点图的变化,其中数据点被气泡代替。 正如Microsoft Office文档所解释的,“如果数据有三个数据系列,每个数据系列都包含一组值,则可以使用气泡图而不是散点图。气泡的大小取决于第三个数据系列中的值“。 —— [ 维基百科 ]
d3官网示例的气泡图如图1所示,该图显示了Flare中各种类之间的层次关系。
对气泡图有了第一印象之后,开始阅读d3.js实现气泡图的源码
index.html文件解读—— [ 源码 ]
很好奇。下面的html5 文件为啥没有body标签?查阅相关资料得知:
在html5中,如果body元素为空,或者body元素中第一个内容不是空格或注释,则起始标签可以省略,除非body元素中第一个内容是一个meta,link,script,style或者template元素。如果body元素后面不是紧跟一个注释,则结束标签可以省略。 —— 《HTML 5 中哪些元素的标签是可以省略的》
<!DOCTYPE html><svg width="960" height="960" font-family="sans-serif" font-size="10" text-anchor="middle"></svg><script src="https://d3js.org/d3.v4.min.js"></script><script>//@onlywan 获取svg 元素,计算相关宽度和高度var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height");//@onlywan 定义将数组转化成字符串的格式var format = d3.format(",d");//@onlywan 定义颜色var color = d3.scaleOrdinal(d3.schemeCategory20c);//@onlywan 打包布局,定义不均宽、高范围以及内间距var pack = d3.pack() .size([width, height]) .padding(1.5);d3.csv("flare.csv", function(d) { //@onlywan 将d.value值转换为正数数值类型 d.value = +d.value; //@onlywan 过滤掉csv文件中无效的数据,即value为0的数据 if (d.value) return d;}, function(error, classes) { if (error) throw error; //@onlywan 处理csv文件中的数据,使之适应bubble chart的需求 var root = d3.hierarchy({children: classes}) //@onlywan sum()函数遍历整个数组,并且计算每个节点上所有子节点的value总和,这里因为是 // 单个节点,因此直接返回value .sum(function(d) { return d.value; }) .each(function(d) { //@onlywan 通过字符串处理,获取数组id中的类名部分,即计算d.class的值,如csv文件中的值 // id = flare.analytics.cluster.AgglomerativeCluster,那么class为 // AgglomerativeCluster,package为flare.analytics.cluster if (id = d.data.id) { var id, i = id.lastIndexOf("."); d.id = id; d.package = id.slice(0, i); d.class = id.slice(i + 1); } }); //@onlywan 生成节点,并绑定上面转换后的数据,并设置class,transform等属性值 var node = svg.selectAll(".node") .data(pack(root).leaves()) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); //@onlywan 为节点添加circle元素并设置相关属性 node.append("circle") .attr("id", function(d) { return d.id; }) .attr("r", function(d) { return d.r; }) .style("fill", function(d) { return color(d.package); }); //@onlywan 设置剪裁路径 node.append("clipPath") .attr("id", function(d) { return "clip-" + d.id; }) //@onlywan 设置use元素及其内容物为id为d.id的元素,即上面定义的 circle元素 ,作为裁减路径 .append("use") .attr("xlink:href", function(d) { return "#" + d.id; }); //@onlywan 定义节点上的文字及其剪裁路径、数据绑定、位置坐标等属性 node.append("text") .attr("clip-path", function(d) { return "url(#clip-" + d.id + ")"; }) .selectAll("tspan") //@onlywan 用split函数给显示文本分段,以便在tspan标签中分行显示,split后数组有多长,那么就创建 // 几个tsapn标签来存放这些文本;随后设置文本的其实位置x为0,y坐标根据一定的距离进行下移 .data(function(d) { return d.class.split(/(?=[A-Z][^A-Z])/g); }) .enter().append("tspan") .attr("x", 0) .attr("y", function(d, i, nodes) { return 13 + (i - nodes.length / 2 - 0.5) * 10; }) .text(function(d) { return d; }); //@onlywan 定义title的文本内容及格式 node.append("title") .text(function(d) { return d.id + "\n" + format(d.value); });});</script>
至此,美丽浪漫的气泡图解读完毕。今天是星期二,天气有点阴沉,但不是很冷。
阅读全文
1 0
- D3.js 中Bubble Chart详解
- 【d3.js教程10】气泡图bubble chart
- 使用GitHub D3制作一个Bubble Chart简介
- 基于d3.js简单bubble图
- D3.js 中 Box Plots详解
- D3.js中Bullet Charts详解
- D3.js中Radial Cluster Dendrogram详解
- D3.js中Force-Directed Graph详解
- D3.js中Circle Packing详解
- D3.js中Population Pyramid详解
- D3.js中Stream graph详解
- d3.js d3.scale.ordinal() --详解 rangeBands
- D3, Bubble Sample
- D3.js中Stacked-to-Grouped Bars详解
- React D3.js pie chart | 解决label重叠的问题
- D3.js中使用scale
- D3学习之:D3.js中的12中地图投影方式
- D3.JS: 在SVG中使用d3创建HTML标签
- js实现方法重载
- 低调的苹果罕见发表论文,揭开自动驾驶汽车技术的冰山一角
- Binary Tree Level Order Traversal:层次遍历二叉树,并返回每层的数值
- 反射
- Java虚拟机类加载机制
- D3.js 中Bubble Chart详解
- 数组中只出现一次的数字
- AndroidStudio、gradle、buildToolsVersion关系
- 最全的常用正则表达式大全
- dns的基本设定(一)
- C语言-数据结构-linklist(单链表)(未完)
- ubuntu下修改crontab的日志文件,使之单独保存为cron.log文件
- 【读书笔记】《代码整洁之道》第4-7章
- PHP学习笔记 14