說(shuō)起可視化工具稽物，D3.js（以下簡(jiǎn)稱d3）無(wú)疑占據(jù)了重要的地位奄毡。然而，伴隨d3學(xué)習(xí)的往往是無(wú)數(shù)示例網(wǎng)頁(yè)以及相對(duì)復(fù)雜的測(cè)試環(huán)境贝或，初學(xué)者不得不學(xué)著配置本地服務(wù)器吼过、引入庫(kù)、不停打開(kāi)控制臺(tái)并復(fù)制粘貼各種代碼咪奖，才能畫出自己的第一個(gè)數(shù)據(jù)圖盗忱。此外，由于d3的繪圖原理比較基層羊赵，初學(xué)者未必能夠掌握其代碼結(jié)構(gòu)趟佃，而只是重復(fù)于各種復(fù)制粘貼的工作。如果能夠有一個(gè)可以分步的昧捷、能夠輸出實(shí)時(shí)結(jié)果并及時(shí)報(bào)錯(cuò)的工具闲昭，d3的學(xué)習(xí)無(wú)疑會(huì)簡(jiǎn)單不少。
Observable就是一個(gè)這樣的工具靡挥。這是一個(gè)可以在線編輯javascript的網(wǎng)站序矩，是d3創(chuàng)始人Mike Bostock的又一力作。
Observable網(wǎng)址：https://observablehq.com
一跋破、observable簡(jiǎn)介
單看項(xiàng)目的樣子簸淀，Observable和大名鼎鼎的jupyter notebook差不多瓶蝴，代碼是以一個(gè)個(gè)“單元”（cell）為基本單位運(yùn)行的，每個(gè)單元可以被單獨(dú)執(zhí)行租幕。
大部分時(shí)候舷手，需要給每個(gè)單元一個(gè)名字，使得該單元內(nèi)容可以被其他單元引用令蛉。
但Observable的最大亮點(diǎn)是聚霜，它允許使用者直接使用各種各樣的開(kāi)源js庫(kù)，只需一句代碼：
即require(‘庫(kù)名’)珠叔。
這個(gè)require命令會(huì)自動(dòng)搜索并引用unpkg.com這個(gè)網(wǎng)頁(yè)中的庫(kù)蝎宇，此功能使得Observable對(duì)于可視化工具的支持程度非常高，也為我們?cè)诰€編輯d3打下了基礎(chǔ)祷安。
二姥芥、寫d3前的準(zhǔn)備工作
首先當(dāng)然是require d3的庫(kù)。
“d3@5”的意思是d3 version5汇鞭，不加版本號(hào)的話將會(huì)默認(rèn)最新版本凉唐。
在這里稍微說(shuō)一下d3 version4和version5（以下簡(jiǎn)稱v4和v5）的區(qū)別。V4與v5的主要區(qū)別即在于加載數(shù)據(jù)上（如下圖霍骄，同時(shí)請(qǐng)求一個(gè)csv文件）
簡(jiǎn)單的說(shuō)台囱，由于v5使用了新的異步方法，其得以直接將數(shù)據(jù)儲(chǔ)存在一個(gè)變量里隨拿隨用读整，使得代碼邏輯更加清晰簿训。但使用新方法的副作用就是很多新的關(guān)鍵字搞不懂（比如上面的”await”），使用起來(lái)可能有很多坑米间。
然而强品，Observable的分步請(qǐng)求解決了這個(gè)問(wèn)題，它的“依次執(zhí)行”的特點(diǎn)屈糊，使得使用者得以將多個(gè)數(shù)據(jù)“保存”在對(duì)應(yīng)變量中隨取隨用的榛，而不依賴ES2017規(guī)范中的關(guān)鍵詞（例如promise與await）（如圖）。
因此逻锐，在Observable上寫d3的準(zhǔn)備工作只需兩步：
1夫晌、require d3；
2昧诱、直接用d3的方法將數(shù)據(jù)賦予變量（如上圖的例子）慷丽。
需要注意的是，因?yàn)槭窃诰€編輯器鳄哭，所以數(shù)據(jù)最好已經(jīng)上傳到網(wǎng)絡(luò)上了要糊，請(qǐng)求數(shù)據(jù)用的url也最好是絕對(duì)鏈接（github就可以辦到）。
三、畫圖（請(qǐng)一定要點(diǎn)開(kāi)看例子）
畫圖的代碼組合同我們平時(shí)直接寫有些許區(qū)別锄俄，但理解這些區(qū)別有助于使d3水平發(fā)生質(zhì)的飛躍局劲。
首先，由于Observable“代碼單元”的屬性奶赠，決定了其每個(gè)單元都有單獨(dú)的任務(wù)鱼填，順利的讓每個(gè)單元執(zhí)行自己的任務(wù)需要最基本的“函數(shù)式編程”的思想。其次毅戈，這種“單元”也可以培養(yǎng)“規(guī)定常量”的意識(shí)苹丸。
以畫一張簡(jiǎn)單的折線圖為例：https://observablehq.com/@d3/line-chart
一張折線圖需要x位置的映射、y位置的映射苇经、繪制x軸赘理、繪制y軸以及畫線，這是五個(gè)單獨(dú)的函數(shù)扇单，最后是將這些函數(shù)畫到畫布上的“畫畫”的函數(shù)（對(duì)svg或者canvas的直接操作）商模。
需要注意的是，畫線的函數(shù)只是規(guī)定了線的走向蜘澜，“用筆畫線”這一步是在“畫畫”函數(shù)里面操作的施流。而x軸與y軸的繪制，則是相當(dāng)于在一張小紙條上畫好鄙信，再“貼在”畫布上瞪醋。
每一個(gè)Observable寫的d3項(xiàng)目中，總有一個(gè)“畫畫”的函數(shù)装诡，只有它執(zhí)行之后會(huì)將內(nèi)容畫出來(lái)趟章。需要注意的是，為了將內(nèi)容畫出來(lái)慎王，需要返回畫布的內(nèi)容，svg用“selection.node()”（這是d3的自帶方法宏侍，返回選擇器中第一個(gè)非空值）赖淤，而canvas用selection.canvas。
四谅河、使用Observable的優(yōu)缺點(diǎn)
使用Observable對(duì)于新手是非常好的鍛煉咱旱，分塊的結(jié)構(gòu)可以使得代碼結(jié)構(gòu)更為清晰，甚至培養(yǎng)編程思想绷耍。方便的庫(kù)引用也使得編程者可以針對(duì)可視化進(jìn)行更多的探索吐限。在線的特征也方便保存與修改。
值得一提的是褂始，Observable擁有諸多優(yōu)秀教程與示例作品诸典，完全可以當(dāng)作學(xué)習(xí)論壇而使用。而其類似github的fork功能使得人人可以創(chuàng)建賬號(hào)將優(yōu)秀的代碼片段復(fù)制過(guò)來(lái)自行修改崎苗。Observable還提供了諸如直接保存svg狐粱、直接保存csv等方便功能舀寓。
Observable官方教程：https://observablehq.com/@observablehq/observable-user-manual
D3官方Observable賬號(hào)：https://observablehq.com/@d3
然而Observable也存在諸多缺點(diǎn)，最大的缺點(diǎn)即是導(dǎo)出復(fù)雜肌蜻。我會(huì)再專門寫一篇文章講如何將辛辛苦苦做出來(lái)的圖用在自己的網(wǎng)頁(yè)里互墓，但總體來(lái)講導(dǎo)出體驗(yàn)一般。
此外蒋搜，其代碼樣式實(shí)現(xiàn)高度依賴js篡撵，不符合代碼與樣式分開(kāi)的思想，在自己網(wǎng)頁(yè)的使用中可能會(huì)有意想不到的麻煩豆挽。
總而言之育谬，Observable并不僅僅是一個(gè)d3在線編輯器，它功能強(qiáng)大祷杈，使用方便斑司，并且社區(qū)有諸多大佬出沒(méi)，非常適合學(xué)習(xí)但汞。它的分步驟的內(nèi)在思想也會(huì)潛移默化的影響使用者的編程習(xí)慣宿刮。
by 李奕
