D3js简介

最新推荐文章于 2024-08-19 11:24:42 发布

hsany330

最新推荐文章于 2024-08-19 11:24:42 发布

阅读量1.3k

点赞数

原文链接：https://zhuanlan.zhihu.com/p/364711814

版权

近年来，可视化越来越流行，许多报刊杂志、门户网站、新闻、媒体都大量使用可视化技术，使得复杂的数据和文字变得十分容易理解，有一句谚语“一张图片价值于一千个字”，的确是名副其实。各种数据可视化工具也如井喷式地发展，D3 正是其中的佼佼者。

D3js是什么

D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作。

JavaScript 文件的后缀名通常为 .js，故 D3 也常使用 D3.js 称呼。D3 提供了各种简单易用的函数，大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ，所以用 JavaScript 也是可以实现所有功能的，但它能大大减小你的工作量，尤其是在数据可视化方面，D3 已经将生成可视化的复杂步骤精简到了几个简单的函数，你只需要输入几个简单的数据，就能够转换为各种绚丽的图形。有过 JavaScript 基础的朋友一定很容易理解它。

学习 D3 需要什么预备知识

想要通过 D3 来开启数据可视化之旅的朋友，需要什么预备知识呢？

HTML：超文本标记语言，用于设定网页的内容
CSS：层叠样式表，用于设定网页的样式
JavaScript：一种直译式脚本语言，用于设定网页的行为
DOM：文档对象模型，用于修改文档的内容和结构
SVG：可缩放矢量图形，用于绘制可视化的图形

需要什么工具

制作网页常用的工具即可。

记事本软件：Notepad++、Editplus、Sublime Text、Atom、VS Code 等，选择自己喜欢的即可。
浏览器：IE9 以上、Firefox、Chrome等，推荐用 Chrome
服务器软件：Apache、Tomcat 等

其中，服务器软件可能不是必须的，不过 D3 中有些函数需要将 HTML 文件放置于服务器目录下，才能正常使用，关于这点以后会再做说明。
好了，可以开始你的 D3 之旅了。

为什么选择 D3

为什么 D3 能够获得程序员和科研人员——甚至是非 Web 开发人员的青睐呢？

D3 提供了一种通过 Web 构建图形的便捷方式。

如果你从事的是数据和可视化工作，通常来说你会在绘图程序中输入数据，然后将结果保存成 PNG 或 PDF，接下来创建一个带有 <img> 标签的网页，以让他人看到你的工作。如若可以一键完成上面这些步骤，何乐而不为呢？

更重要的是，D3 简化了创建动画和交互式图形的方式。

这一点也许不应该过分强调：同其他领域一样，科学可视化也可以从动画和交互当中受益——虽然众所周知这个目标在过去很难实现。它经常需要加入一些复杂或不匹配的技术（听过 Xlib 编程吗？），抑或是添加一些专业但昂贵的商业软件包。D3 让你把上面的一切都抛诸脑后，将最现代的可视化需求呈现在你的面前。

除了图形之外，D3 是一个易学易用的框架，擅长做通用的 DOM 处理。

如果你偶尔需要操作 DOM，那么 D3 将满足你的需求，并且无须掌握其他框架和 API 来编写网页。该库的设计也很巧妙，作为一个模型，它提供了“开箱即用”的功能来处理常见的数据操作和可视化任务。

说了这么多，其中最无可比拟的是 D3 是一种开放技术，用户通过它可以创造无限的可能性。最棒的 D3 应用永远在路上，你就是它的缔造者。

如何学习 D3

学习 D3.js 的旅途中看到的风景十分美妙、壮丽，有时甚至有些崎岖. 你可能会被 D3.js 文档长长的函数列表所吓到(D3’s API documentation ), 或者被成堆的教程弄的疲惫不堪( dozens of tutorials). 这里有超过两万个例子你可以用来学习: 20,000+ D3 examples , 但你不知道哪些是真正对你学习 D3.js 有帮助的.

How To Learn

循序渐进的学习过程是：读书、阅读指导、编写例程。更好的学习方法是加入到社区中去，与大家交流。
在我们这个社区里，准备了大量的例程，你可以由浅入深的去学习，也可以选择你喜欢的专题去练习，也可以与大家讨论你的成果。
我们的学习方法不是循序渐进，而是使用例程，在例程中介绍知识点。通过例程熟悉 D3，最终掌握它、使用它。

课程目录

基础课程
- svg 使用示例
- css 简介
- javascript 简介
- D3js 简介
- 数据绑定
- 使用 js 创建 svg
- 使用 D3js 绘制条形图
- 使用 D3js 绘制散点图
- 比例尺
- 坐标轴
- 更新数据
- 过渡效果
- 读取远程数据
- 管理数据
- 鼠标事件
进阶示例
- Bar Chart
- Horizontal Bar Chart
- Stacked Bar Chart
- Grouped Bar Chart
- Candlestick
- Line Chart
- Multi Line
- Line Threshold Encoding
- Area Chart
- Mutli Area Chart
- Stacked Area Chart
- Scatterplot Chart
- 饼图
- 环状图
- Tooltip
- Color Legend
- Circle Legend
- Vertical Legend
- 坐标轴中文化
高级课程
- 地图
  - World Map
  - China Map
  - Bubble Map
  - Spike Map
  - Hexbin Map
  - Choropleth Map
  - Bivariate Choropleth Map
  - Contour Map
- 地球
  - Projection Translate
  - Earth Map
  - U.S.G.S. World Earthquake Map
  - Gridded Population of the World
  - Power plants around the world by primary fuel type
  - Airport
  - International flight map
- 网络
  - Voronoi
  - Force Dragging
  - Sankey
- 树
  - Tree Map
  - Dendrogram
- 项目示例
  - Subway Station
  - Schedule