我是2015年开始学习D3.js,这几年也经常写D3的代码,想给大家分享一下我D3学习的过程及用到的资源。
首先,介绍一下D3.js是什么。D3官网的定义是:
D3.js (Data-Driven Documents) is a JavaScript library for manipulating documents based on data.
D3是可视化领域很热门的一个JS库,相比于百度的Echarts,个人认为D3实现更灵活、更能满足用户自定义的可视化需求。
然后,D3能做些什么?
通俗来说,D3可以编码快速实现五花八门的图表,并且给这些图表设计出多种多样的交互响应。
我最开始入门,选用了一本中文书籍,《数据可视化实战:使用D3设计交互式图表》,如图1所示,该书浅显易懂,适合小白学习,一步一步从如何下载D3.js,到配置Web环境,再到由易到难的代码实例,都有清楚详细的讲解。
学习完该书以后,对D3就有了一个基本的了解。这时候,我开始看官网的例子,并辅助查询API。D3官网首页上方的一排按钮中点击 Examples(图2 红色框标注的部分),就能看到官网的所有例子(图3)。
官网提供的例子非常丰富,而且大部分例子都提供了可运行的源码,如图4所示是Sortable Bar Chart的例子。
如果官网的例子仍不能满足需求,可以去查看D3作者Mike Bostock的博客,如图5所示。
对新手来说,直接看源码,可能看不懂,看API是一个途径,另一个途径是通过网上的博客学习。这里我要大力推荐馒头华华、眸宇的博客OUR D3.JS(旧版,如图6所示),我15年接触D3时D3还是V3版本,所以主要参考的是旧版博客(现已停更,仅作纪念),后面馒头华华、眸宇开了新的博客十二月咖啡馆(新版,如图7所示)。话说,新版这个画风很少女啊。
这个中文博客是师兄推荐的,主要关于D3学习,内容全面,且关键代码都有详细解释,而且互动活跃,可以说是我D3学习的百宝箱,有什么不懂的去翻翻这个博客,大部分疑问都能得到解答。
通过以上的过程,我的D3学习正式入门了!仅仅是个人学习经历,仅供大家参考。