D3.js 简介

Question

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

如果你只是想要快速得到一个柱状图或者图表，那么这篇文章可能不太适合你. 这里有很多库可以帮你做到这一点: plenty of charting libraries . 如果你更倾向于看书学习，这本书也许是你不错的起点 Interactive Data Visualization for the Web . Elijah Meeks 的 D3.js in Action 可以帮助你更好的了解 D3 的 API.

这篇文章目的是让你在思想上做好学习 D3 的准备，并且提供一些接下来学习的方向. 除了对于 D3 本身 API 的学习，关于 web 标准的 HTML, SVG, CSS, Javascript 和 数据可视化的概念，标准都是需要学习的. 很有可能你已经知道上面这些中的一部分，这篇文章旨在为你继续学习提供一个好的起点。

r2d3.us visual introduction to machine learning 设置了一个很高的起点

在我们进入数据可视化和代码技巧的学习之前，先让我们看看一些能让我们激发学习兴趣的东西. 这里有很多让人惊叹的例子，不妨点进去看一看，并给自己设定一个学习目标: New York Times article , r2d3 , distill.pub , datasketch|es , polygraph , ncase 。

不要只是看看就好，你可以给自己设定一个大一点的目标. 我从这篇文章中学习到，最好的学习方式就是给自己设定一个想要完成的任务，并且绞尽脑汁的去完成它: interviewing some of the top data visualization practitioners using d3.js .

图形化的展现形式

D3 并没有引入一种新的视觉展现形式. 不同于 Processing , Raphaël , 或者 Protovis , D3 图形方面的词汇都是直接来自于 web 标准: : HTML, SVG, and CSS
— http://d3js.org

学习 D3 来写图表就像是学习法语来写营养标签. 公平的来说 , @syntagmatic 确实做出了非常不错的 营养标签

图表仅仅是内部有一些形状的矩形. 而 D3 提供的是一种让你通过操作图标或者你自己定义的图形来表达你想要展示数据的方式. 它让你可以轻易地为你的图形添加可视化交互，定义你的图形有怎样的行为. 你在 D3 中学到的将是一种可视化的表达方式，这是你在其他 library 中所得不到的。

如果你想要了解人们所用的不同种类的标记和图形符号所遵循的准则，你可以参考这本书: Grammar of Graphics .

不过不用担心，仅仅是用圆圈和矩形你就已经可以写出无数具有创造力的作品了. 从简单的事情做起，先在屏幕上展示一些东西，再慢慢优化它。

在 Web 展示上

SVG Beyond Mere Shapes 是对 web 标准的图形操作非常棒的展示

我们选择 D3 的原因之一是: 你可以非常方便的将你的作品分享给任何有浏览器的人. 这意味着你需要对于 HTML5 有一个基本的了解. 在你开始学习 D3 的 API 之前，你应该已经掌握 SVG, HMTL 和 CSS 的基本知识. 如果有时间的话，你最好看看这篇讲 Canvas 的文章（如果你要展示的数据数据量非常大的话) learn some Canvas . 我推荐你也看看这篇，它能帮你很好的将 Canvas 和 D3 结合使用 this is a great intermediate tutorial .

对于 SVG, 我推荐看看这个简短有趣的介绍 SVG primer 来自 Scott Murray . 使用工具: BlockBuilder 来迅速开始你的 coding 而不用费时配置开发环境. 你也可以看看 MDN 对于 SVG 的官方文档 MDN reference site for SVG . 等你掌握了 SVG 的基础知识后，你可以再看看这篇文章，可以让你对 SVG 有一个更深的理解 SVG beyond mere shapes 来自 Nadieh Bremer .

http://blockbuilder.org 让你可以快速上手玩转 web 图形标准!

其实你甚至可以不用使用 SVG 来进行图形展示，有时候直接用 div 就足以让你做出想要的效果. 当然这要求你对 CSS 有较好的掌握: CSS positioning . 为了达到你想要的效果，你甚至可以 混用 HTML, SVG , Canvas !

开始学习 d3.js

d3js.org

你可能见过 D3 的 API 文档，展示着成堆的 Function: d3’s API , 幸运的是，现在 D3 已经拆分为了一个个的模块，所以我们从中挑选一些特别常用的来进行介绍。

d3-scale

colors 是对于 scale 非常常见的一种使用方式

scales 是 D3 中非常基础的一个工具. 你可以从这里对它有一个大概的了解: Introducing d3-scale 来自 D3 作者 Mike Bostock. 无论你做什么样的数据可视化，你都非常有可能用到一种或多种 scale.

d3-shape

streamgraph 感谢 SVG paths

SVG 的 path 非常冗杂 ( see this thorough overview ), 所以 d3-shape 提供了一些让我们非常方便创建并操作 SVG path 的方法. 你可以看看 Mike 的 Introducing d3-shape 来了解它的作用并着手开始使用它. d3-shape 还可以帮助你在 Canvas 中绘制各种各样的图形，你仅仅添加一行代码就能将 SVG 的 path 添加到 Canvas 中!

d3-selection

the General Update Pattern

D3 中最难以理解的部分可能就是它的 selection 了，同样的，看看 D3 作者的文章能让你对 D3 的 selection 模型有一个更好的理解: General Update Pattern . 我花了好几个月用脑袋锤桌子才最终理解了 selection 模型，但是不要为此感到害怕! 你并不需要完完全全的掌握 selection 的所有 api 才能完成一份 D3 的作品. 当你做好了学习的准备，你可以从这篇文章开始: d3-selections README. 还有，请一定看看这篇文章，非常有助于理解 selection 模型 Thinking in Joins .

d3-collection

d3-nest 让你可以非常轻松的 将相似的数据归结在一起

操作数据是数据可视化中非常重要的步骤. 有时候这甚至是最困难的一部 (如果你的数据集不是很完美，或者你对它没有很好的理解). 虽然有很多可以帮助进行数据处理的工具，这里我还是推荐看看 d3 collection d3-collection ,特别是这个模块: nest function.

d3-hierarchy

Treemap 感谢 d3-hierarchy

接着上面对于 数据操作 的讨论. 在很多数据可视化中，按照数据的结构对其进行相应的展示是非常关键的一点. 你可以在这里找到很多工具 Function, 它们能帮你很方便的进行这样的数据处理: d3-hierarchy 绘制树状结构的数据。

d3-zoom

zooming is fun

缩放是一种非常常见的数据可视化交互, D3 的作者 Mike 给出了 一系列的例子 展示如何将缩放功能引入你的数据可视化作品中 d3-zoom . 你也可以看看和 缩放 非常类似的一种操作 拖拽 d3-drag

d3-force

sparse matrices

D3 中非常让人们感到惊艳的功能之一是 d3 force layout . 它非常容易上手使用，但是很难真正掌握. 详细信息请参考: d3-force .

搜索

最后一个 tip: 你可以在这个网址对任何 API Function 搜索使用案例: BlockBuilder’s search .你甚至可以将你的搜索范围限定版本的 d3 上。

look at all those blocks!

D3 社区

Blockiverse

和志同道合的人们联系起来! 你可以加入我们的 slack channel: d3.js slack channel . 或者找到和你最近的 D3 线下活动: https://www.meetup.com/topics/d3-js/ ). 如果你对 D3 非常狂热的话，来参加 SF 每年秋天的聚会吧! annual d3.unconf !

我对于 D3 社区 和 D3 学习过程中困难的理解

原文: https://medium.com/@enjalot/the-hitchhikers-guide-to-d3-js-a8552174733a