厦门大学计算机科学系研究生课程

厦门大学计算机科学系研究生课程《大数据技术原理与应用》上机练习D3可视化库安装和使用主讲教师：林子雨厦门大学数据库实验室二零一五年九月目录1作业题目...................................................................................................................................12作业目的...................................................................................................................................13作业性质...................................................................................................................................14作业考核方法...........................................................................................................................15作业提交日期与方式...............................................................................................................16作业准备...................................................................................................................................17作业内容...................................................................................................................................27.1添加元素...........................................................................................................................27.2数据绑定...........................................................................................................................27.3使用数据.............................................................................................................................47.4用层画条形图.....................................................................................................................57.5SVG概要............................................................................................................................77.6散点图...............................................................................................................................107.7更自由的条形图...............................................................................................................147.8D3作业.............................................................................................................................158实验报告.................................................................................................................................16附录1:任课教师介绍.....................................................................................................................16附录2：课程教材介绍..................................................................................................................16《大数据技术原理与应用》D3可视化库安装和使用上机练习说明主讲教师：林子雨E-mail:[e-mail]个人主页：作业题目D3可视化库安装和使用。2作业目的旨在让学生了解D3可视化数据库，并掌握最基本的使用方法，会生成一些比较简单的图表。3作业性质课后作业，必做，作为课堂平时成绩。4作业考核方法提交上机实验报告，任课老师根据上机实验报告评定成绩。5作业提交日期与方式数据可视化章节内容结束后的下一周周六晚上9点之前提交。6作业准备请阅读厦门大学林子雨编著的大数据专业教材《大数据技术原理与应用》（官网：），了解数据可视化的概念与意义。D3的全称是（Data-DrivenDocuments），顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个JavaScript的函数库，使用它主要是用来做数据可视化的。学习D3最好的地方是：，D3是一个JavaScript函数库，并不需要通常所说的“安装”。它只有一个文件，在HTML中引用即可。有两种方法：（1）下载D3.js的文件d3.zip解压后，在HTML文件中包含相关的js文件即可。（2）还可以直接包含网络的链接，这种方法较简单：scriptsrc==utf-8/script但使用的时候要保持网络连接有效，不能在断网的情况下使用。7作业内容学习D3可视化库需要的一些基础知识如下：HTML：超文本标记语言，用于设定网页的内容CSS：层叠样式表，用于设定网页的样式JavaScript：一种直译式脚本语言，用于设定网页的行为DOM：文档对象模型，用于修改文档的内容和结构SVG：可缩放矢量图形，用于绘制可视化的图形本部分主要介绍D3一些最基本的使用方法，以及生成一些比较简单的图表。7.1添加元素添加元素语法d3.select(body).append(p).text(Newparagraph!);为选择body标签，为之添加一个p标签，并设置它的内容为Newparagraph！源代码：1.html2.head3.metacharset=utf-84.titleD3测试/title5.scripttype=text/javascriptsrc==text/javascript9.d3.select(body).append(p).text(Newparagraph!);10./script11./body12./html13.效果7.2数据绑定D3可以处理哪些类型的数据？它会接受几乎任何数字数组，字符串，或对象（本身包含其他数组或键/值对）。它可以处理JSON和GeoJSON源代码：1.!DOCTYPEhtml2.html3.head4.titletestD3-1.html/title5.scripttype=text/javascriptsrc==text/javascript12.vardataset=[5,10,15,20,25];13.14.d3.select(body).selectAll(p)15..data(dataset)16..enter()17..append(p)18..text(Newparagraph!);19./script20./html语法说明d3.select(body)查找DOM中的body。selectAll(p)选择DOM中的所有段落。由于没有存在，这将返回一个空的选择。这个选择为空，代表段落很快就会存在。data(dataset)计数和分析我们的数据值。有五个值，之后我们的数据集执行了5次，每个值一次。enter()绑定数据和DOM元素。这个方法将数据传递到DOM中。如果数据值比相应的DOM元素多，就用enter()创建一个新元素的占位符。append(p)通过enter()创建的占位符在DOM中插入一个p元素。text(Newparagraph!)为新创建的p标签插入一个文本值。效果：7.3使用数据接上面一个例子可以显示数据值，还可以根据数据值来修改颜色值。d表示当前数据值。可以使用一个匿名函数处理这个数据。源代码：1.!DOCTYPEhtml2.html3.head4.metacharset=utf-85.titletestD3-3.html/title6.scripttype=text/javascriptsrc==text/javascript10.11.vardataset=[5,10,15,20,25];12.13.d3.select(body).selectAll(p)14..data(dataset)15..enter()16..append(p)17..text(function(d){18.returnIcancountupto+d;19.})20..style(color,function(d){21.if(d15){//Thresholdof1522.returnred;23.}else{24.returnblack;25.}26.});27.28./script29./body30./html效果：7.4用层画条形图（1）、为同类层添加样