D3.js 的认识

近年来，随着可视化越来越流行，许多报刊杂志、门户网站、新闻、媒体都大量使用了可视化技术，使得复杂的数据和文字变得十分容易理解，“一张图片价值于一千个字”确是名副其实。数据可视化工具也如井喷式地发展，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 等，但推荐使用XBuilder X，不为别的就是好用！
• 浏览器：IE9 以上、Firefox、Chrome等，推荐用 Chrome

为什么选择 D3

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

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

D3 简化了创建动画和交互式图形的方式。

同其他领域一样，可视化也可以从动画和交互当中受益——虽然众所周知这个目标在过去很难实现。

D3 是一个易学易用的框架，擅长做通用的 DOM 处理。

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

学习 D3

学习 D3.js 可以看到的风景十分美妙，有时有些崎岖.，你可能会被 D3.js 文档长长的函数列表所吓到 (D3’s API documentation )， 或者被成堆的教程弄的疲惫不堪( dozens of tutorials).，大可不必，有的东西可能基本不会用到，先学会使用简单的，再理解贯通，遇到要用的再找文档。

像下面的，你可能常用到的就那几个，那不可能全把时间死磕这里吧，有时间的你可以任性！

• 目录
  • 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
  • 坐标轴中文化
  • 地图
    • Contour Map
    • Bivariate Choropleth Map
    • Choropleth Map
    • Hexbin Map
    • Spike Map
    • Bubble Map
    • China Map
    • World 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

参考资料

D3js: Data-Driven Documents

Mike Bostock（github）

Mike Bostock 的示例 ​​​​​​

d3js Gallery 教程

官方画廊

Observable

D3 实现中国地图 (源码（自己找）)

D3 入门