实验一 二维标量可视化实验指导书.docxVIP

实验一 二维标量可视化实验指导书目录1.D3简介12.技术基础13.安装D314.例：基于数据绘图——条形图35.实验要求5实验一 二维标量可视化实验指导书D3简介D3，全称叫Data-Driven Documents（数据驱动的文档）。数据来源于你，而文档就是基于Web的文档（或者网页），代表可以在浏览器中展现的一切，比如HTML，SVG。D3扮演的是一个驱动程序的角色，因为它联系着数据和文档。D3 的主要作者是才华横溢的Mike Bostock，此外还有几位贡献者。这个项目完全是开源的，托管在GitHub 上（/mbostock/d3/），任何人都可以自由 使用。D3 的许可方式是BSD，因此无论你出于商业还是非商业目的使用、修改和整合它， 都不用付出任何代价。D3 官方网站是。技术基础Web, HTML, DOM, CSS, JavaScript, SVG安装D3配置Web服务器建议大家在本机上安装一个Web服务器软件，比使用远程Web服务器更方便也快捷。有许多Web服务器软件，比如MAMP，WAMP，LAMP等，这里介绍windows下的XAMP。XAMP是集成Apache（Web服务器软件），MySQL（数据库软件）和PHP（服务器脚本语言）等的软件，我们主要是用Apache。解压之后，文件夹htdocs是服务器的目录，以便公开该目录下的文件。下载D3在服务器目录文件夹下先建立一个新文件夹，保存项目文件，比如project。在这个文件夹里，最好再创建一个子文件夹叫d3，把下载的d3最新版本d3.v3.js保存在这个子文件夹中，另外“瘦身”版本d3.v3.min.js体积更小，加载速度更快。引用D3在项目文件夹中创建一个HTML页面，命名index.html。TextEdit，Notepad和Editplus均可以编辑它。保存时文件编码选项，选择UTF-8。现在，文件夹结构如下：project/d3/ d3.v3.jsd3.v3.min.jsindex.html把下面的代码粘贴到新建的HTML文件中：!DOCTYPE htmlhtml lang=’en’headmeta charset=”utf-8”titleD3 Page Template/titlescript type=”text/javascript” src=”d3/d3.v3.js”/script/headbodyscript type=” text/javascript”//你的D3代码/script/body/html关于这个模版，有以下几点说明：meta标签注明文件的编码是utf-8，这是确保浏览器正确解析D3的数据和功能的关键；第一个script标签设定了对.js的引用，如果你想使用缩减版本或加载保存在其他地方的D3文件，就需要修改这里的文件路径。第二个script标签在body中，是你编写代码的地方。这个模板文件和文件夹可以应用于以后创建其他项目， 完整复制过去即可。浏览器打开页面接下来就可以通过浏览器查看服务器目录下的页面，在浏览器中输入：http://localhost/http://localhost/,后面跟不跟端口号，要看你的服务器配置。在本例中，D3的项目文件夹是project，那么该D3模板页面地址应该是：http://localhost/project。开发者工具现代浏览器几乎都内置了开发者工具，开发者工具十分重要，能够把浏览器内部的工作过程展示出来。在你写代码的时候，经常需要它来测试代码，而在遇到问题时，还要借助它找到原因所在。例：基于数据绘图——条形图//Width and heightvar w = 500;var h = 100;var barPadding = 1;var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];//Create SVG elementvar svg = d3.select(body).append(svg).attr(width, w).attr(height, h);svg.selectAll(rect).data(dataset).enter().append(rect).attr(x, function(d, i) {return i * (w / dataset.length);}).attr(y, function(d) {return h - (d * 4);}).attr(width, w / dataset.length - barPadding).attr(height, function(d) {return d * 4;}).attr(fi