D3.js 简介

原文: https://medium.com/@enjalot/the-hitchhikers-guide-to-d3-js-a8552174733a 译文源代码地址: https://github.com/ssthouse/d3-blog/blob/master/d3-guide/d3_roadmap_cn.md

如果这篇文章对你有帮助的话, 不妨点个赞 :tada:

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/2018/6/12/163f24615b562fcd?w=1838&h=812&f=png&s=42330

)

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/2018/6/12/163f2461562c382e?w=921&h=293&f=png&s=267173

)学习D3来写图表就像是学习法语来写营养标签. 公平的来说 ,

@syntagmatic

确实做出了非常不错的

营养标签

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

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

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

在Web展示上

是对web标准的图形操作非常棒的展示](

https://user-gold-cdn.xitu.io/2018/6/12/163f2461640c2160?w=2216&h=1056&f=png&s=475378 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有一个更深的理解