[TOC] --- # D3 简介 ## D3 是什么？ D3的全称是Data-Driven Documnets ，直译为“数据驱动的文档”。 简单说：**D3 是一个JavaScript 的函数库，是用来做数据可视化的。** 文档指 DOM，即文档对象模型(Document Object Model) 。D3允许用户绑定任意数据到DOM ，然后根据数据来操作文档，创建可交互式的图表。 ### D3简史  ### D3的优势 可视化的库有很多，基于JavaScript 开发的库也很多，D3 有什么优势呢？ - 1. 数据能够与DOM 绑定在一起 D3 能够将数据与DOM 绑定在一起，使得数据与图形成为一个整体，即图形中有数据、数据中有图形。那么在生成图形或更改图形时，就可以方便地根据数据进行操作。并且，当数据更改之后，图形的更新也会很方便。 - 2. 数据转换和绘制是独立的 将数据变成图表，需要不少数学方法，一些可视化库的做法是：提供一个函数 drawPie(),输入数据，直接绘制出饼状图。 D3的做法是：提供一个函数computePie(),可将数据转换成饼状图的数据，然后开发者使用自己喜欢的方式来绘制饼图。 - 3. 代码简洁 采用链式写法，一个函数套一个函数，使得代码更加简洁。 - 4. 大量布局 饼状图、树形图、打包图、矩阵树图等，D3将大量复杂的算法封装成一个一个“布局”，能够适用于各种图表的制作。 - 5. 基于SVG，缩放不会损失精度 SVG，是可缩放的矢量图形，D3 大部分是在SVG上绘制，并且提供了大量的图形生成器，使得在SVG上绘制图形变得简单。另外，由于SVG是矢量图，所以放大缩小不会有精度损失。 ### D3的适用范围 D3 的应用是显示在网页上。因此，开发者需将数据置于服务器端，并在网页文件（HTML）中插入D3代码。用户通过浏览器请求此网页文件，就会看见开发者希望让用户看到的可视化内容。 Ben Fry 在他的著作《Visualizing Data》 中将数据可视化的过程分为七个步骤： 1. 获取---Acquire 2. 分析---Parse 3. 过滤---Filter 4. 挖掘---Mine 5. 表现---Represent 6. 改善---Refine 7. 交互---Interact 前四步不属于D3 的处理范围，更多的是处理后三步，即表现、改善、交互。 ## 数据可视化是什么 数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。但是，这并不就意味着数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味，或者是为了看上去绚丽多彩而显得极端复杂。为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。然而，设计人员往往并不能很好地把握设计与功能之间的平衡，从而创造出华而不实的数据可视化形式，无法达到其主要目的，也就是传达与沟通信息。 数据可视化与信息图形、信息可视化、科学可视化以及统计图形密切相关。当前，在研究、教学和开发领域，数据可视化乃是一个极为活跃而又关键的方面。“数据可视化”这条术语实现了成熟的科学可视化领域与较年轻的信息可视化领域的统一。 ### 目的  ### 构成要素 数据可视化的手法很多，其中有一些共通的视觉要素。   ## 图表种类         ## 学习方法