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

《实验一 二维标量可视化实验指导书》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、实验一二维标量可视化实验指导书目录1.D3简介12.技术基础13.安装D314.例：基于数据绘图——条形图35.实验要求5实验一二维标量可视化实验指导书1.D3简介D3，全称叫Data-DrivenDocuments（数据驱动的文档）。数据来源于你，而文档就是基于Web的文档（或者网页），代表可以在浏览器中展现的一切，比如HTML，SVG。D3扮演的是一个驱动程序的角色，因为它联系着数据和文档。D3的主要作者是才华横溢的MikeBostock，此外还有几位贡献者。这个项目完全是开源的，托管在GitHub上（https://github

2、.com/mbostock/d3/），任何人都可以自由使用。D3的许可方式是BSD，因此无论你出于商业还是非商业目的使用、修改和整合它，都不用付出任何代价。D3官方网站是http://d3js.org。2.技术基础Web,HTML,DOM,CSS,JavaScript,SVG3.安装D33.1配置Web服务器建议大家在本机上安装一个Web服务器软件，比使用远程Web服务器更方便也快捷。有许多Web服务器软件，比如MAMP，WAMP，LAMP等，这里介绍windows下的XAMP。XAMP是集成Apache（Web服务器软件），MySQ

3、L（数据库软件）和PHP（服务器脚本语言）等的软件，我们主要是用Apache。解压之后，文件夹htdocs是服务器的目录，以便公开该目录下的文件。3.2下载D3在服务器目录文件夹下先建立一个新文件夹，保存项目文件，比如project。在这个文件夹里，最好再创建一个子文件夹叫d3，把下载的d3最新版本d3.v3.js保存在这个子文件夹中，另外“瘦身”版本d3.v3.min.js体积更小，加载速度更快。3.3引用D3在项目文件夹中创建一个HTML页面，命名index.html。TextEdit，Notepad和Editplus均可以编辑它

4、。保存时文件编码选项，选择UTF-8。现在，文件夹结构如下：project/d3/d3.v3.jsd3.v3.min.jsindex.html把下面的代码粘贴到新建的HTML文件中：

5、ipt”>//你的D3代码关于这个模版，有以下几点说明：meta标签注明文件的编码是utf-8，这是确保浏览器正确解析D3的数据和功能的关键；第一个script标签设定了对.js的引用，如果你想使用缩减版本或加载保存在其他地方的D3文件，就需要修改这里的文件路径。第二个script标签在body中，是你编写代码的地方。这个模板文件和文件夹可以应用于以后创建其他项目，完整复制过去即可。3.1浏览器打开页面接下来就可以通过浏览器查看服务器目录下的页面，在浏览器中输入：http://localh

6、ost/,后面跟不跟端口号，要看你的服务器配置。在本例中，D3的项目文件夹是project，那么该D3模板页面地址应该是：http://localhost/project。3.2开发者工具现代浏览器几乎都内置了开发者工具，开发者工具十分重要，能够把浏览器内部的工作过程展示出来。在你写代码的时候，经常需要它来测试代码，而在遇到问题时，还要借助它找到原因所在。1.例：基于数据绘图——条形图//Widthandheightvarw=500;varh=100;varbarPadding=1;vardataset=[5,10,13,19,21,

7、25,22,18,15,13,11,12,15,20,18,17,16,18,23,25];//CreateSVGelementvarsvg=d3.select("body").append("svg").attr("width",w).attr("height",h);svg.selectAll("rect").data(dataset).enter().append("rect").attr("x",function(d,i){returni*(w/dataset.length);}).attr("y",function(d){r

8、eturnh-(d*4);}).attr("width",w/dataset.length-barPadding).attr("height",function(d){returnd*4;}).attr("fill",f