《D3.js数据可视化实战手册》—— 1.2 搭建一个简易的D3开发环境

    xiaoxiao2024-04-20  3

    本节书摘来异步社区《D3.js数据可视化实战手册》一书中的第1章,第1.2节,作者: 【加拿大】Nick Qi Zhu,更多章节内容可以访问云栖社区“异步社区”公众号查看。

    1.2 搭建一个简易的D3开发环境

    D3.js数据可视化实战手册在开始使用D3之前,我们要做的第一件事是搭建一个开发环境。这节里,我们将告诉你如何在几分钟内搭建一个简单的D3开发环境。

    1.2.1 准备阶段

    在我们开始前,请确保你已经安装好一个文本编辑器。

    1.2.2 搭建环境

    我们先要下载D3.js。

    1.我们可以在http://d3js.org/下载最新版本的D3.js,也可以在https://github. com/mbostock/d3/tags下载之前的版本。另外,如果你对开发中的最新D3版本感兴趣,可以fork以下的代码库https://github.com/mbostock/d3。

    2.下载并且解压缩后,我们得到了3个文件:d3.v3.js、d3.v3.min.js和许可证文件。在开发过程中,建议使用d3.v3.js,它可以帮你深入到D3库中跟踪调试JavaScript代码。把d3.v3.js和新建的index.html放在同一个文件夹里,index.html应该包含下面的代码。

    <!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Simple D3 Dev Env</title> <script type="text/javascript" src="d3.v3.js"></script> </head> <body> </body> </html>

    图像说明文字 如果是直接下载源代码或者tagged 版本,JavaScript文件的名字会略微不同,叫做d3.js,而非d3.v3.js。

    我们已经搭建了一个最简单的D3数据可视化开发环境。现在可以用我们最喜欢的文本编辑器编辑那个html文件,还可以用浏览器打开它来检查可视化的效果。

    图像说明文字可以在这里下载这个例子的源码: https://github. com/NickQiZhu/d3-cookbook/tree/master/ src/chapter1/simple-dev-env。

    1.2.3 工作原理

    D3是个相当独立的程序库。它不依赖于特定浏览器提供的功能以及其他JavaScript库。实际上,你甚至可以通过简单的配置,让D3脱离浏览器而在诸如Node.js这样的环境中运行起来(后面的章节会更详细地介绍这点)。

    图像说明文字如果你的浏览器是IE9,建议使用Aight兼容库和Sizzle selector engine。其中前者可以在这里下载:https:// github.com/shawnbot/aight,而后者可以在这里下载:http://sizzlejs.com/。

    html文件的头部信息中必须包含如下的编码格式声明。

    <meta charset="utf-8">``` 上述声明会告诉浏览器和验证器在渲染页面的时候使用哪个字符集,否则浏览器就不会正确加载D3了,因为D3使用了一些utf-8里面的特殊字符,比如π。 图像说明文字D3是完全开源的。它使用了它的作者Michael Bostock自己定制的开源许可证。该许可证跟流行的MIT许可证十分类似,仅有一点不同,就是其明确声明了Michael Bostock的名字未经允许不可用来标记此软件的派生品,或者用以扩大此软件的派生品的影响。 ####1.2.4 更多内容 本书提供了大量的代码示例。所有的源码均可在GitHub上下载到(https:// github.com)。 如何获取源码 最简单的方式就是直接克隆Git上的代码库。如果你不打算构建开发环境,跳过这步即可。 图像说明文字如果你不熟悉Git,克隆(clone)很类似于其他的版本控制软件中的签出(checking out)。不过克隆所做的并非简单的签出。它把所有分支和历史拷贝到了你的本地机器,也就是把整个代码库都拷贝到了本地机器中,所以你完全可以使用这个拷贝过来的代码库,在本地环境中离线工作。 如果是首次安装Git,可以在这里找到Git客户端下载列表:``http://git-scm.com/ downloads`` ,在这里还有针对不同操作系统的安装向导:``http://git-scm.com/book/ en/Getting-StartedInstalling-Git``. 图像说明文字另一个使用Git和GitHub的方式是安装GitHub客户端,它提供了比Git更多样的功能。在作者编写本书时,GitHub仅仅提供了Windows版和Mac OS版。 安装完Git客户端后,运行下面的命令就可以把本书中所有的代码都下载到你的机器里。

    git clone git://github.com/NickQiZhu/d3-cookbook.git

    相关资源:d3.js 数据可视化实战手册随书源码
    最新回复(0)