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

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

图像说明文字如果你打算使用GitHub客户端(目前还没有中文版),在``https://github.com/NickQiZhu/d3-cookbook``页面点击Fork按钮(在页面的右上角),之后你就可以在GitHub客户端中看到这个代码库了。
时间: 2024-09-19 09:17:16

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

《D3.js数据可视化实战手册》——导读

前言 D3.js数据可视化实战手册 D3.js是一个JavaScript库,它主要用于对数据的动态图表展示.通过HTML.SVG以及CSS,D3可以让数据展现得更加鲜活.D3使得数字的图形化展示变得异常简单,可以说,它是当下最强大的基于网络的数据可视化技术. 本书理论与实践结合,力图向读者全方位地展示D3数字可视化技术,帮助读者快速利用D3创建可视化程序.学习完本书后,快速高效地创建叹为观止的数据可视化程序,对读者来说将是小菜一碟! 本书由浅入深,首先介绍了一些D3数字可视化编程中的基本概念,继

《D3.js数据可视化实战手册》—— 第1章 D3.js入门指南

第1章 D3.js入门指南 D3.js数据可视化实战手册本章涵盖以下内容: 搭建简易的D3开发环境 搭建基于NPM(Node Packaged Modules是Node.js的套件管理工具)的开发环境 理解D3风格的JavaScript

《D3.js数据可视化实战手册》—— 1.3 搭建一个基于NPM的开发环境

1.3 搭建一个基于NPM的开发环境 D3.js数据可视化实战手册如果你所在的项目是一个略复杂的数据展示项目,并且使用了为数不少的JavaScript库,那我们之前讨论的那个简单的解决方案可能就显得有些褚小杯大,不能胜任了.在这一节当中,我们将展示一个使用了NPM(Node Packaged Modules,实际上就是JavaScript库的代码库管理系统)的更加强大的系统.如果你像我一样没有耐心,想更快地尝试本书最带劲儿的部分,想学点秘传招式,完全可以跳过这部分,如果想搭建一个产品开发环境,再

《D3.js数据可视化实战手册》—— 第2章精挑细选

第2章精挑细选 D3.js数据可视化实战手册本章涵盖以下内容: 选取单个元素选取多个元素迭代选集中的元素使用子选择器函数级联调用处理原始选集

《D3.js数据可视化实战手册》—— 1.1 简介

1.1 简介 D3.js数据可视化实战手册本章旨在帮助读者初步认识并且运行D3.js.其中包含一些基本知识,比如什么是D3.js,如何搭建一个典型的D3.js数据可视化(data visualization)环境.还有一个专门的章节,解释了一些JavaScript中鲜为人知而D3.js又甚为倚重的特性. 什么是D3?D3是指数据驱动文档(Data-Driven Documents),根据D3的官方定义: D3.js是一个JavaScript库,它可以通过数据来操作文档.D3可以通过使用HTML.

《D3.js数据可视化实战手册》——2.6 函数级联调用

2.6 函数级联调用 到现在为止,我们看到的D3 API都体现了函数级联调用的思想.因此它接近于形成了一个可以动态构建HTML/SVG的领域特定语言(Domain Specific Language).在接下来的例子中,我们将看到如何只使用D3来生成前一个例子的页面结构. 提示.tif 如果对DSL不熟悉,推荐阅读Martin Fowler在领域特定语言(Domain-Specific Languages)一书中的相关解释,参见http://www.informit.com/articles/a

《D3.js数据可视化实战手册》—— 2.1 简介

2.1 简介 选集(selection)是基于D3的可视化项目的重要基础之一,它用来定位页面上的特定视觉元素.如果你已经熟知W3C的标准CSS选择器,或一些流行的JavaScript库(如jquery或Zepto.js)提供的选择器API,那么掌握D3的选择器API对你来说将易如反掌.不过,即便从未接触过选择器也无妨,本章将借助一些生动的例子,带领你一步步地进入选择器的世界,这些例子涵盖了可视化中的绝大多数应用场景. 所有的现代浏览器都内嵌支持W3C的标准选择器API.然而,在网络开发,尤其数据

《D3.js数据可视化实战手册》——2.2 选择单个元素

2.2 选择单个元素 在进行视觉处理时,我们常常需要选择页面上的单个元素.本例将展示在D3中如何使用CSS选择器来选取特定单个元素. 2.2.1 准备阶段 请在浏览器中打开如下文件的本地副本. https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter2/single-selection.html 2.2.2 开始编程 让我们来选取一些元素并在屏幕上打印经典的"hello world"信息. <p id=&qu

《D3.js数据可视化实战手册》——2.7 处理原始选集

2.7 处理原始选集 虽然不常使用,但某些时候,获取D3的原始选集数组对于开发是有利的,因为无论是为了调试,还是和其他JavaScript库集成,都可能需要原始的DOM元素.在本例中,我们将会对此进行展示.同时,我们也会观察D3选集对象的内部结构. 2.7.1 准备阶段 请在浏览器中打开如下文件的本地副本. https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter2/raw-selection.html 2.7.2 开始编程