D3.js是一个使用动态图形进行数据可视化的JavaScript程序库。与W3C标准兼容,并且利用广泛实现的SVG、JavaScript和CSS标准,改良自早期的Protovis程序库。与其他的程序库相比,D3对视图结果有很大的可控性。
D3.js 是一个使用动态图形进行数据可视化的 JavaScript 程序库。与 W3C 标准兼容,并且利用广泛实现的 SVG、JavaScript 和 CSS 标准,改良自早期的 Protovis 程序库。与其他的程序库相比,D3 对视图结果有很大的可控性。D3 是 2011 年面世的,同年的 8 月发布了 2.0.0 版。
D3.js 已被数十万个网站使用,最常被运用在在线新闻网站呈现交互式图形、呈现数据资料的图表和呈现含有地理信息的资料。另外 SVG 的输出功能也使得 D3.js 能用于印刷出版物的绘制上。
历史
在 D3.js 开发之前已经有出现过许多尝试做资料可视化的包,例如 Prefuse,Flare 和 Protovis 程序库,他们都可以视为 D3.js 的前身。然而 Prefuse 和 Flare 皆有缺点,皆不能只透过浏览器完成渲染,皆须要透过额外插件来完成。
例如 2005 年发布的 Prefuse 是一个资料可视化程序库,但是它需要透过网页的 Java 插件才能于浏览器中呈现;而 Flare 是 2007 年发布的另一个资料可视化工具包,由于其是使用 ActionScript 编程语言开发,因此也需要额外插件,即 Flash 插件才能完成渲染。
2009 年,史丹佛大学的史丹佛可视化团队(Stanford Visualization Group)的杰佛瑞·赫尔、迈克·保斯托和瓦迪姆·欧格菲兹齐利用开发 Prefuse 和 Flare 的经验开始用 Javscript 开发了可从给定资料产生 SVG 图形的 Protovis 程序库。而 Protovis 程序库在业界和学界皆有一定的知名度。
2011 年,史丹佛可视化团队停止开发 Protovis,并开始开发新的资料可视化程序库,借由之前开发 Protovis 的经验,开发出了 D3.js 程序库,在注重于 Web 标准的同时提供了更丰富的平台也有了更好的性能。
D3 的全称是 Data-Driven Document,可以理解为:由数据来决定绘图流程的程序设计模型。
D3 是一个 JavaScript 的函数库,是用来做数据可视化的。
将数据变成图形,要想用原生的 HTML、SVG、Canvas 来实现是烦琐和困难的。D3 为我们封装好这些,让开发者能更注重图表的布局和逻辑。
D3 的优势
JavaScript 的前端可视化库,除了 D3 外还有不少:Highcharts、Echarts、Chart.js。它们可以看作一类的,共同特点是封装层次很高,能够非常简单地制作图表,但是给予开发者控制和设计的空间很少。封装层次太高自然会失去部分自由,但太低又会使程序过长,D3 在这一点上取得了平衡。
D3 的特性
数据与元素捆绑的特性
D3 能够将数据与 DOM 绑定在一起,使数据与图形称为一个整体。计算和绘图相互独立的特性
将数据变成图表,可分为两步:计算和绘图
在 D3 里,计算和绘图是分开的。在可视化的设计比较复杂时,计算和绘图分开易于调整和操作细节。链式语法强大的图形计算能力同时支持 SVG 和 Canvas
SVG 和 Canvas 是 HTML5 用于绘图的元素,分别用于绘制矢量图和标量图,各自有自己的适用领域。D3 3.x 以前是以 SVG 为基础的,主要提供 SVG 的绘图能力。从 4.x 开始支持 Canvas。
相关概念
数据可视化 和 信息可视化 很相近,有时几乎可以等同。但严格来说它们是不同的:
数据可视化是对数字信息进行可视化信息可视化是对数字信息和非数字信息进行可视化
技术原理
D3.js 透过预先创建好迁入于网页中的 JavaScript 函数来选择网页元素、创建 SVG 元素、调整 CSS 来呈现资料,并且也可以设置动画、动态改变对象状态或加入工具提示来完成用户交互功能。使用简单的 D3.js 函数就能够将大型的数据数据结构与 SVG 对象进行绑定,并且能生成格式化文本和各种图表。其数据数据结构的格式可以是 JSON、CSV(以逗号分隔的资料)或 GeoJSON,也可以透过自己写 JavaScript 函数来读取其他或自定义格式的资料。
JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼。D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ,所以用 JavaScript 也是可以实现所有功能的,但它能大大减小你的工作量,尤其是在数据可视化方面,D3 已经将生成可视化的复杂步骤精简到了几个简单的函数,你只需要输入几个简单的数据,就能够转换为各种绚丽的图形。有过 JavaScript 基础的朋友一定很容易理解它。