锐客网

  1. 首页 > it技术 > >

干货|干货|d3创始人又一力作（不仅能在线写D3.js，还能让你写的更出色）

说起可视化工具，D3.js（以下简称d3）无疑占据了重要的地位。然而，伴随d3学习的往往是无数示例网页以及相对复杂的测试环境，初学者不得不学着配置本地服务器、引入库、不停打开控制台并复制粘贴各种代码，才能画出自己的第一个数据图。此外，由于d3的绘图原理比较基层，初学者未必能够掌握其代码结构，而只是重复于各种复制粘贴的工作。如果能够有一个可以分步的、能够输出实时结果并及时报错的工具，d3的学习无疑会简单不少。
Observable就是一个这样的工具。这是一个可以在线编辑javascript的网站，是d3创始人Mike Bostock的又一力作。


干货|干货|d3创始人又一力作（不仅能在线写D3.js，还能让你写的更出色）
文章图片
Observable标志 Observable网址：https://observablehq.com
一、observable简介
单看项目的样子，Observable和大名鼎鼎的jupyter notebook差不多，代码是以一个个“单元”（cell）为基本单位运行的，每个单元可以被单独执行。


干货|干货|d3创始人又一力作（不仅能在线写D3.js，还能让你写的更出色）
文章图片
大部分时候，需要给每个单元一个名字，使得该单元内容可以被其他单元引用。


干货|干货|d3创始人又一力作（不仅能在线写D3.js，还能让你写的更出色）
文章图片
但Observable的最大亮点是，它允许使用者直接使用各种各样的开源js库，只需一句代码：
即require(‘库名’)。


干货|干货|d3创始人又一力作（不仅能在线写D3.js，还能让你写的更出色）
文章图片
这个require命令会自动搜索并引用unpkg.com这个网页中的库，此功能使得Observable对于可视化工具的支持程度非常高，也为我们在线编辑d3打下了基础。
二、写d3前的准备工作
首先当然是require d3的库。


干货|干货|d3创始人又一力作（不仅能在线写D3.js，还能让你写的更出色）
文章图片
“d3@5”的意思是d3 version5，不加版本号的话将会默认最新版本。
在这里稍微说一下d3 version4和version5（以下简称v4和v5）的区别。V4与v5的主要区别即在于加载数据上（如下图，同时请求一个csv文件）


干货|干货|d3创始人又一力作（不仅能在线写D3.js，还能让你写的更出色）
文章图片
【干货|干货|d3创始人又一力作（不仅能在线写D3.js，还能让你写的更出色）】简单的说，由于v5使用了新的异步方法，其得以直接将数据储存在一个变量里随拿随用，使得代码逻辑更加清晰。但使用新方法的副作用就是很多新的关键字搞不懂（比如上面的”await”），使用起来可能有很多坑。
然而，Observable的分步请求解决了这个问题，它的“依次执行”的特点，使得使用者得以将多个数据“保存”在对应变量中随取随用，而不依赖ES2017规范中的关键词（例如promise与await）（如图）。


干货|干货|d3创始人又一力作（不仅能在线写D3.js，还能让你写的更出色）
文章图片
因此，在Observable上写d3的准备工作只需两步：
1、require d3；
2、直接用d3的方法将数据赋予变量（如上图的例子）。
需要注意的是，因为是在线编辑器，所以数据最好已经上传到网络上了，请求数据用的url也最好是绝对链接（github就可以办到）。
三、画图（请一定要点开看例子）
画图的代码组合同我们平时直接写有些许区别，但理解这些区别有助于使d3水平发生质的飞跃。
首先，由于Observable“代码单元”的属性，决定了其每个单元都有单独的任务，顺利的让每个单元执行自己的任务需要最基本的“函数式编程”的思想。其次，这种“单元”也可以培养“规定常量”的意识。
以画一张简单的折线图为例：https://observablehq.com/@d3/line-chart
一张折线图需要x位置的映射、y位置的映射、绘制x轴、绘制y轴以及画线，这是五个单独的函数，最后是将这些函数画到画布上的“画画”的函数（对svg或者canvas的直接操作）。
需要注意的是，画线的函数只是规定了线的走向，“用笔画线”这一步是在“画画”函数里面操作的。而x轴与y轴的绘制，则是相当于在一张小纸条上画好，再“贴在”画布上。
每一个Observable写的d3项目中，总有一个“画画”的函数，只有它执行之后会将内容画出来。需要注意的是，为了将内容画出来，需要返回画布的内容，svg用“selection.node()”（这是d3的自带方法，返回选择器中第一个非空值），而canvas用selection.canvas。
四、使用Observable的优缺点
使用Observable对于新手是非常好的锻炼，分块的结构可以使得代码结构更为清晰，甚至培养编程思想。方便的库引用也使得编程者可以针对可视化进行更多的探索。在线的特征也方便保存与修改。
值得一提的是，Observable拥有诸多优秀教程与示例作品，完全可以当作学习论坛而使用。而其类似github的fork功能使得人人可以创建账号将优秀的代码片段复制过来自行修改。Observable还提供了诸如直接保存svg、直接保存csv等方便功能。
Observable官方教程：https://observablehq.com/@observablehq/observable-user-manual
D3官方Observable账号：https://observablehq.com/@d3
然而Observable也存在诸多缺点，最大的缺点即是导出复杂。我会再专门写一篇文章讲如何将辛辛苦苦做出来的图用在自己的网页里，但总体来讲导出体验一般。
此外，其代码样式实现高度依赖js，不符合代码与样式分开的思想，在自己网页的使用中可能会有意想不到的麻烦。
总而言之，Observable并不仅仅是一个d3在线编辑器，它功能强大，使用方便，并且社区有诸多大佬出没，非常适合学习。它的分步骤的内在思想也会潜移默化的影响使用者的编程习惯。
by 李奕

    推荐阅读


    上一篇：不识抬举

    下一篇：当你为乐动体育合作伙伴南安普顿惋惜时，请不要忘了他们还有……