D3.js学习之路

D3.js 简介

原文: https://medium.com/@enjalot/t...

译文源代码地址: https://github.com/ssthouse/d...

若是这篇文章对你有帮助的话, 不妨点个赞

github 地址: https://github.com/ssthouse/d3-blog

学习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 和 数据可视化的概念,标准都是须要学习的. 颇有可能你已经知道上面这些中的一部分, 这篇文章旨在为你继续学习提供一个好的起点.

sets the bar high](https://user-gold-cdn.xitu.io...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

has made some beautiful nutrition visualizations](https://user-gold-cdn.xitu.io...学习D3来写图表就像是学习法语来写养分标签. 公平的来讲 , @syntagmatic 确实作出了很是不错的 养分标签

图表仅仅是内部有一些形状的矩形. 而D3提供的是一种让你经过操做图标或者你本身定义的图形来表达你想要展现数据的方式. 它让你能够轻易地为你的图形添加可视化交互, 定义你的图形有怎样的行为. 你在D3中学到的将是一种可视化的表达方式, 这是你在其余library中所得不到的.

若是你想要了解人们所用的不一样种类的标记和图形符号所遵循的准则, 你能够参考这本书: Grammar of Graphics.

不过不用担忧, 仅仅是用圆圈和矩形你就已经能够写出无数具备创造力的做品了. 从简单的事情作起, 先在屏幕上展现一些东西, 再慢慢优化它.

在Web展现上

是对web标准的图形操做很是棒的展现](https://user-gold-cdn.xitu.io...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.

makes it easy to play with web standards!](https://user-gold-cdn.xitu.io...http://blockbuilder.org 让你能够快速上手玩转web图形标准!

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

开始学习 d3.js

](https://user-gold-cdn.xitu.io...d3js.org

你可能见过D3的API文档, 展现着成堆的Function: d3’s API, 幸运的是, 如今D3已经拆分为了一个个的模块, 因此咱们从中挑选一些特别经常使用的来进行介绍.

d3-scale

are one common use of scales!](https://user-gold-cdn.xitu.io...colors 是对于scale很是常见的一种使用方式

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

d3-shape

, thanks to SVG paths!](https://user-gold-cdn.xitu.io... 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

](https://user-gold-cdn.xitu.io...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

](https://user-gold-cdn.xitu.io...d3-nest 让你能够很是轻松的 将类似的数据归结在一块儿

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

d3-hierarchy

is easy to layout thanks to d3-hierarchy](https://user-gold-cdn.xitu.io... Treemap 感谢 d3-hierarchy

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

d3-zoom

!](https://user-gold-cdn.xitu.io...zooming is fun!

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

d3-force

, amirite?](https://user-gold-cdn.xitu.io...

sparse matrices

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

搜索!

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

look at all those blocks!

D3社区

](https://user-gold-cdn.xitu.io...Blockiverse

和志同道合的人们联系起来! 你能够加入咱们的slack channel: d3.js slack channel. 或者找到和你最近的D3线下活动: https://www.meetup.com/topics... 若是你对D3很是狂热的话, 来参加SF每一年秋天的聚会吧! annual d3.unconf!

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

很是感谢 Erik Hazzard 帮助我编辑和润色这篇文章. 感谢 Kai Chang 对于文章提出的建议, 更加感谢你对于 d3 社区的帮助. 感谢slack channel #teaching-d3 in the d3js Slack, 特别是 Sebastian 和 John 的反馈. 固然了, 最最感谢D3的做者 Mike Bostock 创造了一个能让咱们全部人玩耍的乐园 !

想继续了解 D3.js

这里是个人 D3.js 、 数据可视化 的github 地址, 欢迎 start & fork

D3-blog

若是以为不错的话, 不妨点击下面的连接关注一下 : )

github主页

知乎专栏

掘金

想直接联系我 ?

邮箱: ssthouse@163.com

微信: