分享
分享赚钱 收藏 举报 版权申诉 / 6

类型实验一 二维标量可视化实验指导书.docx

  • 上传人:fmgc7290
  • 文档编号:7220862
  • 上传时间:2019-05-10
  • 格式:DOCX
  • 页数:6
  • 大小:28.36KB
  • 配套讲稿:

    如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

    特殊限制:

    部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。

    关 键  词:
    实验一 二维标量可视化实验指导书.docx
    资源描述:

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

    2、可以自由 使用。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 服务器软件) ,MySQL(数据库软件)和 PHP(服务器脚本语言)

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

    4、oject/d3/ d3.v3.jsd3.v3.min.jsindex.html把下面的代码粘贴到新建的 HTML 文件中:D3 Page Template/你的 D3 代码关于这个模版,有以下几点说明: meta 标签注明文件的编码是 utf-8,这是确保浏览器正确解析 D3 的数据和功能的关键; 第一个 script 标签设定了对 .js 的引用,如果你想使用缩减版本或加载保存在其他地方的 D3 文件,就需要修改这里的文件路径。 第二个 script 标签在 body 中,是你编写代码的地方。这个模板文件和文件夹可以应用于以后创建其他项目, 完整复制过去即可。3.4 浏览器打开页面接下来就

    5、可以通过浏览器查看服务器目录下的页面,在浏览器中输入:http:/localhost/,后面跟不跟端口号,要看你的服务器配置。在本例中,D3 的项目文件夹是 project,那么该 D3 模板页面地址应该是:http:/localhost/project。3.5 开发者工具现代浏览器几乎都内置了开发者工具,开发者工具十分重要,能够把浏览器内部的工作过程展示出来。在你写代码的时候,经常需要它来测试代码,而在遇到问题时,还要借助它找到原因所在。4. 例:基于数据绘图条形图/Width and heightvar w = 500;var h = 100;var barPadding = 1;var

    6、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)

    7、;).attr(“y“, function(d) return h - (d * 4);).attr(“width“, w / dataset.length - barPadding).attr(“height“, function(d) return d * 4;).attr(“fill“, function(d) return “rgb(0, 0, “ + (d * 10) + “)“;);svg.selectAll(“text“).data(dataset).enter().append(“text“).text(function(d) return d;).attr(“text-anc

    8、hor“, “middle“).attr(“x“, function(d, i) return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;).attr(“y“, function(d) return h - (d * 4) + 14;).attr(“font-family“, “sans-serif“).attr(“font-size“, “11px“).attr(“fill“, “white“);4.1 绘图结果4.2 连缀方法从上面代码很容易看出来,D3 利用了一种叫连缀语法的技术,通过用句点把方法“连

    9、缀” 在一起,一行代码能执行多个操作。var svg = d3.select(“body“).append(“svg“).attr(“width“, w).attr(“height“, h);4.3 具体分析 D3引用 D3 对象,从而能够调用其方法 .select(“body”)向 select 方法传入一个 CSS 选择符作为输入,它就会返回一个对DOM 中匹配的第一个元素的引用。如果你想取得多个元素,使用selectAll()方法。这里知只取得文档的 body 元素,然后把对它的引用交给调用链中的下一个方法。 .append(“svg”)append()会创建一个你指定的新的 DOM 元

    10、素,然后将它追加到调用它的元素末尾(作为最后一个子元素) 。这里创建了一个 svg 元素,因为调用该方法的是 body,所以结构就是在 body 元素内部追加一个 svg 元素,最后 append()把刚刚创建的新元素的引用交给下一个方法。 .text(“text”)Text()接受一个字符串,把它插入到当前元素的开始和结束标签之间。 .data(dataset)解析并数出数据值,此后所有方法都会对每一个数据执行一遍。 .enter()要创建新的绑定数据的元素,必须使用 enter()。这个方法会分析当前选择的 DOM 元素和传给它的数据,如果数据值比对应的 DOM 元素多,就会创建一个新的占

    11、位元素。然后把这个新占位元素的引用交给链中的下一个方法。4.4 匿名函数function(input_value) return output_value;)这种函数就叫做匿名函数,使用 D3 的过程中会写大量的匿名函数。我们例子中的匿名函数写在了 D3 的 text()函数中,因此它会先执行,然后把执行结果交给 text()。而完成最后的工作(将接收到的参数值作为文本插入到选中的 DOM 元素中):.text(function(d) return d;)5. 实验要求使用 d3 以及提供的 NBA 篮球上个赛季的数据(basketball statics.xlsx) ,绘制一个热图(heat map) ,并提交实验报告。

    展开阅读全文
    提示  道客多多所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    关于本文
    本文标题:实验一 二维标量可视化实验指导书.docx
    链接地址:https://www.docduoduo.com/p-7220862.html
    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

    道客多多用户QQ群:832276834  微博官方号:道客多多官方   知乎号:道客多多

    Copyright© 2025 道客多多 docduoduo.com 网站版权所有世界地图

    经营许可证编号:粤ICP备2021046453号    营业执照商标

    1.png 2.png 3.png 4.png 5.png 6.png 7.png 8.png 9.png 10.png



    收起
    展开