数据可视化基础数据可视化基础第五章-D3.js介绍_第1页
数据可视化基础数据可视化基础第五章-D3.js介绍_第2页
数据可视化基础数据可视化基础第五章-D3.js介绍_第3页
数据可视化基础数据可视化基础第五章-D3.js介绍_第4页
数据可视化基础数据可视化基础第五章-D3.js介绍_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1第五课D3.js介绍学习目标学习目标了解D3.js的基本概念通过一个快速上手的案例，了解如何通过D3js完成一个基本图表能能力目标能够根据实际场景选择合适的可视化工具能够上手QuickBI能够通过D3完成简单的图形2D3是什么D3的全称是(Data-DrivenDocuments)，从名字直译过来是一个被数据驱动的文档。听起来比较抽象，其实就是一个开源的JavaScript的函数库，提供了各种简单易用的函数，大大简化了JavaScript完成可视化操作的难度。JavaScript文件的后缀名通常为.js，故D3也常使用D3.js称呼。D3提供了各种简单易用的函数，大大简化了JavaScript操作数据的难度。能大大减小工作量，尤其是在数据可视化方面，D3已经将生成可视化的复杂步骤精简到了几个简单的函数，你只需要输入几个简单的数据，就能够转换为各种绚丽的图形。有过JavaScript基础的就可以很快掌握。D3的官网是/,在Document的链接中，可以看到官方的API手册，也有部分翻译过来的中文手册。是我们查看各种API用法的最权威资料。在Example链接中，是用D3.js完成的各种图形的样例，也是我们学习D3中非常重要的学习资源。当然还有非常多的D3的案例的资源，包括/mbostock是D3的创始人MikeBostock的博客，一直在不断更新非常多的用D3完成的图表案例。了解基本语法，从不断模仿案例中，进一步理解各类API,并灵活创建自己的图表，是学习D3的有效路径。D3的安装和使用D3类库的文件名就是d3.js,只有一个文件，所有的对象，函数和变量都写在此文件中，3因此所谓的安装就是在<script>中引用文件即可。目前最新版本的D3是V4版本，我们实验和演示中，都使用V4版本。引用有两种方法，如果网络条件好，可以直接从官网引用。或是将库文件下载下来，放在工程目录中引用。O下载文件的方式可以在官网主页上找到最新版本的下载链接，下载d3.zip文件，解压后的三个文件包括d3.js完整版，开发时候为了方便调试，建议用此文件d3.min.js压缩版，去掉了空格等字符，功能一样，了浏览器的读取速度更快，发布时应该用此版本LICENSE版权许可证文件将解压缩后的文件至于工程目录下，目录结构推荐放在独立的d3子目录中，在我们的演示和实验环境中如下。在实际的html文件中，通过下面的代码引入d3的库<head><metacharset="UTF-8"><!--Version4.4.4--><scripttype="text/javascript"src="../js/d3/d3.min.js"></script></head>O网络引用也可以直接通过网络引用d3库，这样就无须下载，很方便，但是一定要网络条件好才行。<head><metacharset="UTF-8"><!--Version4.4.4--><scripttype="text/javascript"src="../js/d3/d3.min.js"></script></head>O搭建服务器4T浏览器可以直接打开HTML文件，但是有些浏览器会限制JavaScript加载本地文件，因此如果不搭建服务器，使用D3的某些请求文件的函数就会出现错误。因此建议把所有的网页文件都放到Web服务器上进行测试。搭建服务器非常简单,可以下载安装ApacheHTTPServer。或是用Python命令开启简单的Http服务器PythonmSimpleHTTPServer我们在本课程中，采用HTML5的IDE开发工具Hbuilder(官网https://dcloud.io/)，可以及时查看浏览器显示，并内置了Web服务器，因此不用再搭建服务器了。HelloHelloWorld多数编程语言的第一步都是在屏幕上输出“HelloWorld”字符串，我们也不免俗，第一个D3的程序就是将屏幕上的HelloWorld字符串改成WelcomeD3.js的字符串<body><p>HelloWorld</p><p>HelloWorld</p></body><scripttype="text/javascript">d3.select("body").selectAll("p").text("welcomeD3.js");</script>这个例子里面就是通过select选择器，选择了HTML里面的p元素，并修改其中的文字为“WelcomeD3.js”.5选择集选择集上面的D3的例子中，最重要的部分就是select函数了。这是D3中用来选择HTML元素的函数，包括select和selectAll这两种方式。select:返回匹配选择器中的第一个元素selectAll：返回匹配选择器中的所有元素选择器是select和selectAll的参数，指定应当选择文档中的哪些元素，这里我们用的是CSS选择器，比方////选择body元素//选择id为important的元素//选择类为content的第一个元素d3.select(“body”);d3.select(“#important”);d3.select(“.content”);如果符合选择器的元素有多个，但是select只选择第一个，如果要选择所有元素，就使用selectAll。////选择所有的p元素//选择类为content的元素//选择ul中所有的li元素ctAllpd3.selectAll(“ulli”);选择集通过d3.select和d3.selectAll返回的对象成为选择集(selection)，增删网页中的元素都要使用选择集。比方说，我们在HelloWorld的例子中，通过text函数，更新p元素里的文字。SelectionSelection.text(“WelcomeD3.js”);还可以通过attr设定和获取属性。selectionselection.attr("style","color:red;fon

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论