在HTML 5以及蓬勃發(fā)展的JavaScript庫當(dāng)中，新型圖形元素已經(jīng)顯示出了積極的發(fā)展態(tài)勢、也昭示著交互式數(shù)據(jù)顯示技術(shù)的興起。如今的網(wǎng)絡(luò)瀏覽器不僅需要提供具備響應(yīng)式設(shè)計(jì)以及美觀圖形控制方案的豐富用戶界面，同時(shí)也需要作為數(shù)據(jù)可視化效果的承載平臺(tái)——包括柱狀圖、氣泡圖、風(fēng)圖以及豐富多彩的地圖效果，且提供邊界縮放功能。

面向數(shù)據(jù)可視化的JavaScript庫

通過網(wǎng)絡(luò)，我們得以在自己的桌面系統(tǒng)中獲得幾乎無窮無盡的、來自各新聞媒體、博客及廠商（包括任何擁有網(wǎng)站并提供數(shù)據(jù)源訪問的管理者）的多種動(dòng)態(tài)效果與交互式圖形——其豐富程度遠(yuǎn)超我們當(dāng)初的想象。

現(xiàn)階段的交互式數(shù)據(jù)可視化機(jī)制主要由專門針對(duì)特定任務(wù)所設(shè)計(jì)的JavaScript庫來實(shí)現(xiàn)。在今天的文章中，我們將主要關(guān)注四款此類庫，它們分別是D3、InfoVis、 Processing.js以及Recline.js。它們?nèi)磕軌虮挥糜诮鉀Q我們的網(wǎng)頁動(dòng)態(tài)數(shù)據(jù)可視化需求，但其中每一款方案所采取的實(shí)現(xiàn)方法都有所不同。另外，全部四項(xiàng)技術(shù)都供大家免費(fèi)使用，并可在開源許可的規(guī)范下進(jìn)行重新發(fā)布。

D3是一套頗具“開創(chuàng)性”的方案，它利用 JavaScript當(dāng)中一部分較為晦澀的功能將數(shù)據(jù)結(jié)構(gòu)與DOM表現(xiàn)方式相結(jié)合，最終帶來了強(qiáng)大而令人眼前一亮的理想效果。

InfoVis則采取了較為保守的處理途徑。其 API非常明確，使用起來也非常簡便：插入圖表對(duì)象并為其提供數(shù)據(jù)，其它的工作放心交給InfoVis即可。

作為原本基于Java的圖形系統(tǒng)的JavaScript 版本，Processing.js并不僅僅對(duì)給定數(shù)據(jù)的內(nèi)容進(jìn)行可視化處理，它也能像我們在主機(jī)游戲中見到的那樣把結(jié)果以動(dòng)畫形式呈現(xiàn)出來。

最后要介紹的是Recline.js，它利用數(shù)據(jù)探索模式實(shí)現(xiàn)數(shù)據(jù)可視化處理。雖然它更傾向于將數(shù)據(jù)整理成字段與記錄，但用戶也可以通過它獲得時(shí)間線、線狀圖甚至是地理可視化處理結(jié)果。

圖所示為D3中經(jīng)過修改的氣泡圖實(shí)例，這里的“圓形”元素被替換成了方形、但實(shí)際代表的正是原始方案中的“氣泡”概念。

D3

大家可能已經(jīng)在實(shí)際工作中接觸過D3（也就是 Data-Driven Documents的簡稱）——它是一款可視化庫、目前《紐約時(shí)報(bào)》在線版面的大部分網(wǎng)頁都由其提供交互式信息圖形支持。而這些文章所使用的鏈接則大多來自Michael Bostock建立的網(wǎng)站——他正是D3項(xiàng)目的主要締造者，雖然他認(rèn)為其中很大一部分功勞應(yīng)歸屬于Jason Davies。

D3屬于名為Protovis的早期項(xiàng)目的衍生產(chǎn)物。關(guān)于由Protovis到D3的這一場重大革新以及相關(guān)內(nèi)部資料，大家可以查閱由Bostock、 Vadim Ogievetsky以及Jeff Heer聯(lián)合撰寫的論文《D3：Data-Driven Documents》。

與jQuery類似，D3同樣直接對(duì)DOM進(jìn)行操作。這也成為它與其它可視化工具的主要區(qū)別所在 ——它會(huì)設(shè)置單獨(dú)的對(duì)象以及功能集，并通過標(biāo)準(zhǔn)API進(jìn)行DOM調(diào)用。D3所采用的整套機(jī)制頗為Web開發(fā)人員所熟悉。舉例來說，我們可以利用由D3控制的CSS樣式元素。此外，由于D3在顯示文檔時(shí)所使用的內(nèi)部結(jié)構(gòu)與瀏覽器完全一致，因此我們能夠直接將現(xiàn)有基于瀏覽器的開發(fā)及調(diào)試工具用于D3環(huán)境。

D3所提供的selection可謂至關(guān)重要。在其幫助下，我們能夠?qū)Ω黝愇臋n節(jié)點(diǎn)集輕松并反復(fù)進(jìn)行各類操作。要變更所有段落元素的顏色，我們只需使用以下代碼：

d3.selectAll("p").style("color","white"); 

這種“鏈接”技術(shù)相當(dāng)于功能的執(zhí)行通道—— 每條通道都能將結(jié)果正確傳遞至對(duì)應(yīng)功能—— 相信熟悉jQuery與Prototype的朋友對(duì)此一定不會(huì)感到陌生。D3程序員可以利用它來簡潔地表達(dá)多種處理方式。selection讓DOM節(jié)點(diǎn)的操作更簡單，我們只需設(shè)定屬性及樣式、或者復(fù)雜的節(jié)點(diǎn)排序——包括添加及刪除節(jié)點(diǎn)。

D3通過data()函數(shù)將數(shù)據(jù)與DOM節(jié)點(diǎn)進(jìn)行綁定。作為通常位于一個(gè)選定操作之后的函數(shù)， data()能夠建立數(shù)據(jù)節(jié)點(diǎn)并將其與由 selection返回的DOM節(jié)點(diǎn)進(jìn)行關(guān)聯(lián)。大家可以把這類數(shù)據(jù)看作被“連接”到了DOM節(jié)點(diǎn)當(dāng)中。這些被接入的數(shù)據(jù)最終將成為DOM節(jié)點(diǎn)所表現(xiàn)的可視化元素的驅(qū)動(dòng)依據(jù)。它決定了條狀圖形的高度、氣泡圖中氣泡單位的大小、地圖上標(biāo)記點(diǎn)的位置等等。

數(shù)據(jù)接入可以算是D3當(dāng)中的關(guān)鍵性組成部分，也被稱為“一般更新模式。”作為一種D3應(yīng)用程序的編寫風(fēng)格，一般更新模式以selection 操作為起點(diǎn)，而后依次通過D3的enter()函數(shù)將元素添加到新數(shù)據(jù)當(dāng)中、更新現(xiàn)有元素（通過修改需要變更的任何一種元素屬性），最后通過D3的exit()函數(shù)刪除已經(jīng)不再作為可視化組成部分的數(shù)據(jù)。盡管難于快速掌握，但這種一般更新模式在對(duì)可視化整體生命周期進(jìn)行管理時(shí)確實(shí)表現(xiàn)出色。

數(shù)據(jù)同樣扮演著推動(dòng)D3的重要角色，它能夠指控工具產(chǎn)生動(dòng)態(tài)顯示效果，并生成相對(duì)簡單的靜態(tài)圖形。在氣泡圖當(dāng)中，各氣泡單位的相對(duì)尺寸可以任意縮放、柱狀圖中的柱形高度能夠自由伸縮，同時(shí)新數(shù)據(jù)在進(jìn)入可視化處理流程后、舊數(shù)據(jù)也將自由退出。

在D3中，整個(gè)轉(zhuǎn)換過程通過一個(gè)包含兩幀內(nèi)容的關(guān)鍵幀動(dòng)畫來體現(xiàn)，即開始與結(jié)束。開始幀通過視覺元素顯示當(dāng)前狀態(tài)，結(jié)束幀則由包含與指向該元素的特定屬性值負(fù)責(zé)定義。D3的插入器功能負(fù)責(zé)處理整個(gè)轉(zhuǎn)換過程。D3為插入器提供多種備選項(xiàng)目，例如數(shù)字與顏色；這套方案的智能性很高，足以找到對(duì)應(yīng)字符串并向其中插入嵌入值，例如字體規(guī)格中的字體大小。大家也可以定義自己的插入器功能；D3甚至支持CSS3轉(zhuǎn)換機(jī)制。

D3的顯示效果為放射狀Reingold-Tilford樹圖。其中所使用的數(shù)據(jù)來自Flare ActionScript庫的API。

那么這些數(shù)據(jù)來自何處？盡管大家可以將其直接嵌入到應(yīng)用程序當(dāng)中，但D3也提供數(shù)據(jù)的外部讀取功能，其支持來源包括：文本文件、 CSV文件、JSON文件等等。它甚至能夠讀取 HTML文檔并通過解析將其內(nèi)容插入到文檔樹當(dāng)中。

D3的說明文檔可謂浩如煙海，而且分散排布在網(wǎng)頁上的各個(gè)鏈接當(dāng)中。其API文檔相當(dāng)出色，除了解釋說明之外還提供大量代碼實(shí)例。與此同時(shí)，API文檔中的鏈接也指向多種特定功能，全部內(nèi)容都根據(jù)D3的各個(gè)模塊加以分類。其說明頁面也包含有其它教程以及案例演示網(wǎng)站的鏈接。

大家在查閱范例匯總時(shí)也能得到不少樂趣，整個(gè)學(xué)習(xí)過程像是走進(jìn)了D3可視化樣品的展覽館。其中的很多實(shí)例都附有詳盡解說以及對(duì)源代碼的注釋，我們完全可以花上幾天時(shí)間深入研究所有圖表類型以及能夠借此實(shí)現(xiàn)的可視化技術(shù)方案。

不過D3的學(xué)習(xí)曲線相對(duì)而言較為嚴(yán)苛。

一套利用D3創(chuàng)建的泰坦尼克號(hào)幸存者定制、交互式多維可視化圖表。在實(shí)例中，大家可以點(diǎn)擊對(duì)應(yīng)維度來顯示對(duì)應(yīng)“工具欄”。

它對(duì)變化數(shù)據(jù)集的可視化處理機(jī)制——包括正在進(jìn)行修改的現(xiàn)有數(shù)據(jù)元素、正在添加的新型數(shù)據(jù)元素以及正被移除的舊有數(shù)據(jù)元素——要求使用者進(jìn)行認(rèn)真研究并擁有對(duì)JavaScript 的深入理解，否則根本無從上手。幸運(yùn)的是， D3提供的教程非常出色，而且事實(shí)證明花費(fèi)在學(xué)習(xí)上的時(shí)間會(huì)為大家?guī)砝硐氲幕貓?bào)。

D3能夠駕馭由HTML 5以及DOM提供的全部要素，而且能夠充分發(fā)揮用戶在JavaScript方面的卓越技能。它通過對(duì)標(biāo)準(zhǔn)文檔對(duì)象的準(zhǔn)確操作為我們帶來可靠的可視化數(shù)據(jù)分析結(jié)果。不過奇怪的是，D3對(duì)于圖形處理工作幾乎一無所知——它甚至不知道如何繪制一個(gè)圓形（它需要借用HTML 5所提供的圖形繪制功能）。D3 的真正實(shí)力在于，它能夠以數(shù)據(jù)為基礎(chǔ)對(duì)文檔（正如在DOM當(dāng)中）進(jìn)行轉(zhuǎn)換——而這正是其 Data-Driven Documents名頭的由來。

#p#

InfoVis

JavaScript InfoVis工具集，或者簡稱InfoVis，由Nicolas Garcia Belmonte一手打造。盡管這套工具集目前由Sencha所持有，但它仍然遵循開源（BSD）許可。

InfoVis總體而言屬于一套圖表庫，且主要依賴對(duì)JSON的調(diào)用。數(shù)據(jù)在被傳遞至InfoVis的圖表函數(shù)當(dāng)中之后，就會(huì)被轉(zhuǎn)化為JSON對(duì)象的形式。此外，當(dāng)對(duì)圖表進(jìn)行初始化時(shí)（即創(chuàng)建圖表中的對(duì)象，例如面積圖），圖表中的參數(shù)會(huì)被指定為JSON對(duì)象中的元素、而后才會(huì)正式進(jìn)入初始化流程。從效果方面講，JSON對(duì)象可以被視為InfoVis函數(shù)調(diào)用中的命名參數(shù)。

InfoVis的固有圖形包括區(qū)狀、柱狀以及餅狀圖；樹形圖；空間及超級(jí)樹狀圖；環(huán)狀圖；放射狀圖以及力引導(dǎo)圖形。大家也可以將多種圖形類型混合使用以建立可視化效果（下圖所示即為餅狀圖與樹形圖的混合產(chǎn)物）。大部分圖表提供可配置顯示選項(xiàng)，允許我們定制獨(dú)一無二的圖表類型。舉例來說，大家可以在顯示區(qū)域中要求樹形圖左對(duì)齊、居中或者右對(duì)齊。

InfoVis還提供一系列核心功能函數(shù)，其中大部分直接取向各類流行JavaScript庫中的相似功能——例如jQuery、Prototype以及MooTools。舉例來說，InfoVis提供的each()函數(shù)能夠?qū)δ硞€(gè)重復(fù)應(yīng)用特定函數(shù)——這一特性在處理大規(guī)模選擇結(jié)果（例如變更特定<div>類中的全部實(shí)例文字顏色）時(shí)非常實(shí)用。

這份由InfoVis生成的力引導(dǎo)圖形顯示了虛構(gòu)家族體系當(dāng)中不同成員間的彼此關(guān)系。

每一種圖表類對(duì)象都包含一個(gè)相關(guān)jupdateJSON() 方法，我們需要借此實(shí)現(xiàn)圖表數(shù)據(jù)更新。作為將圖表內(nèi)數(shù)據(jù)批量替換為另一組數(shù)據(jù)的手段，轉(zhuǎn)換機(jī)制被內(nèi)置于InfoVis的可視化對(duì)象當(dāng)中。不過這套庫還定義了一組控制器方法，大家可以通過調(diào)用來設(shè)置回調(diào)函數(shù)。這些回調(diào)操作會(huì)在動(dòng)畫的不同階段中付諸執(zhí)行——這些動(dòng)畫可以由轉(zhuǎn)換或者用戶交互所觸發(fā)。舉例來說，大家可以通過定義要求一條回調(diào)函數(shù)僅調(diào)用某個(gè)正在進(jìn)行繪制的節(jié)點(diǎn)，從而在該節(jié)點(diǎn)對(duì)象被變更之前調(diào)整其圖形。

同樣，大家也可以向圖表中正在進(jìn)行初始化的 JSON對(duì)象嵌入函數(shù)。舉例來說，我們可以指定一個(gè)onShow事件處理程序，用戶將鼠標(biāo)懸停在特定元素之上時(shí)即會(huì)將其觸發(fā)。通過將該函數(shù)引用至特定節(jié)點(diǎn)當(dāng)中，大家能夠撮與該節(jié)點(diǎn)相關(guān)的數(shù)據(jù)并將其顯示在彈出表格當(dāng)中。

InfoVis的API說明文檔條理清晰，作者對(duì)網(wǎng)頁進(jìn)行了精心整理。左側(cè)為導(dǎo)航欄，內(nèi)容則顯示在右側(cè)。所有條目都被分門別類進(jìn)行匯總——包括 Core、Loader以及Visualizations等等——并利用深度鏈接方便使用者進(jìn)行瀏覽。不過要說最妙之處，則不能不提InfoVis的演示網(wǎng)頁。所有內(nèi)容都采用交互式設(shè)計(jì)，作者甚至通過大量經(jīng)過整理并附有注釋的代碼來幫助我們理解特定方面的知識(shí)。

與D3相比，InfoVis顯然是一款更加平易近人的工具集。初上手時(shí)，我們只需選擇一種圖表類型、為其提供一些JSON數(shù)據(jù)即可——剩下的工作 InfoVis自己就能完成。隨著我們對(duì)這款工具的逐漸熟悉，其可配置選項(xiàng)允許大家調(diào)整并以動(dòng)畫形式顯示最終生成的定制化效果。

InfoVis通過環(huán)狀圖所顯示的目錄樹。將鼠標(biāo)懸停在不同分區(qū)之上，就會(huì)有彈窗出現(xiàn)以提供對(duì)應(yīng)目錄或者文件的具體信息。

#p#

Processing.js

從數(shù)個(gè)方面來看，Processing.js與其它幾款工具都有所不同。首先，Processing.js屬于 Processing可視化語言的JavaScript接口。Processing語言最初由麻省理工學(xué)院所開發(fā)，根據(jù)其說明文檔的表述、它是一種“簡化版 Java、且具備針對(duì)繪制及圖形處理任務(wù)的簡化 API。”

Processing IDE（在Java JVM當(dāng)中執(zhí)行）包含大量演示應(yīng)用。上圖中IDE正在演示如何各行星如何圍繞太陽進(jìn)行軌道運(yùn)動(dòng)（利用云紋理實(shí)現(xiàn)）。

其次，盡管Processing.js能夠被用于圖形及圖表的繪制工作，但它同時(shí)也是一套相當(dāng)正規(guī)的通用型圖形與動(dòng)畫工具集。Processing（當(dāng)然也包括Processing.js）在數(shù)據(jù)可視化處理功能之外，還為我們帶來2D與3D圖形命令機(jī)制，允許用戶借此創(chuàng)建動(dòng)畫、交互式數(shù)字藝術(shù)作品甚至視頻游戲。在processing.js的展示頁面中，大家會(huì)看到眾多令人贊嘆的鏈接——其中包括海洋生物動(dòng)畫、小行星環(huán)境下的視頻游戲以及素描應(yīng)用等等。 Processing.js利用HTML 5的canvas元素進(jìn)行圖片渲染。從某種意義上講，Processing.js拓展了HTML 5的canvas功能——Processing.js 認(rèn)為其初始功能太過低級(jí)，無法有效為開發(fā)人員服務(wù)。在使用Processing.js的過程中，我們通常需要利用Processing語言進(jìn)行代碼編寫，并利用Processing.js將代碼內(nèi)容轉(zhuǎn)譯成 JavaScript代碼以交付執(zhí)行。當(dāng)然，轉(zhuǎn)譯過程其實(shí)在編寫當(dāng)中已經(jīng)同步完成。

要開發(fā)Processing.js應(yīng)用程序，大家還需要下載并使用Processing IDE。（目前提供Windows、 Linux以及Mac OS版本）這套IDE基本上算是一款編輯器，提供運(yùn)行與停止按鈕、旨在通過彈窗顯示我們的Processing應(yīng)用。這套IDE還允許開發(fā)人員將應(yīng)用程序?qū)С鰹闃?biāo)準(zhǔn)可執(zhí)行格式。最重要的是，如果大家之前從未接觸過Processing，下載內(nèi)容中還包含大量應(yīng)用示例源代碼。

除了IDE之外，Processing.js網(wǎng)站還提供 Processing.js幫助頁面。大家可以將自己的 Processing代碼復(fù)制到該頁面的文本框當(dāng)中，而后點(diǎn)擊運(yùn)行來查看其在瀏覽器中的實(shí)際執(zhí)行結(jié)果。再有，幫助頁面也附帶一款轉(zhuǎn)換器，能夠?qū)?Processing代碼轉(zhuǎn)換為同等效果的 Processing.js JavaScript代碼。

由于收到廣大用戶的要求，Processing.js的開發(fā)者們已經(jīng)推出了專門用于在Processing.js應(yīng)用程序中執(zhí)行圖形化操作的Processing.js引擎API。這意味著我們能夠跳過利用Processing語言進(jìn)行代碼編寫并將成果轉(zhuǎn)譯成JavaScript代碼的步驟。相反，大家只需直接在自己的JavaScript代碼中調(diào)用圖形引擎即可。

Processing.js網(wǎng)站上提供的教程介紹了如何將數(shù)據(jù)在不同Processing實(shí)例（即在Processing引擎當(dāng)中執(zhí)行的對(duì)象）之間來回傳遞以及如何讓JavaScript函數(shù)在引擎之外運(yùn)行。

Processing.js網(wǎng)站也提供豐富的文檔資源鏈接。而且這些鏈接能幫助我們獲取更多與Processing相關(guān)的信息資源。最妙的是，演示應(yīng)用數(shù)量堪稱極大豐富（我粗略估算有90個(gè)以上）。它們?nèi)刻峁┛梢暬瘓?zhí)行窗口以及源代碼，而且不少實(shí)例還針對(duì)具體功能給出了解釋說明。 Processing.js仍然沒能徹底與其Java根源區(qū)分開來。它在使用感受上與Java類似。不過由于Processing.js 屬于JavaScript而且我們可以在任何一段JavaScript 代碼中實(shí)現(xiàn)該庫API調(diào)用，因此Processing.js應(yīng)用能夠訪問所有DOM對(duì)象。

這幅交互式圖形由Fink Labs利用Processing.js創(chuàng)建，顯示的是AFL/VFL（澳大利亞足球賽）從1897年到2010年的獲勝球隊(duì)。每一年用一個(gè)圓環(huán)表示，在原示例中通過鼠標(biāo)懸停即可查看年度與球隊(duì)名稱信息。

除此之外，再?zèng)]有什么能阻止大家將Processing.js與其它任何JavaScript庫混合使用了。

#p#

Recline.js

Recline.js被標(biāo)榜為一款“簡單但強(qiáng)大的庫，能夠在純JavaScript及HTML環(huán)境下創(chuàng)建數(shù)據(jù)應(yīng)用程序。”它主要由Rufus Pollock博士（以及他在開放知識(shí)基金會(huì)中的同事們）以及Max Ogden所締造。Recline.js的內(nèi)部結(jié)構(gòu)可被劃分成三塊：模型、后端與視圖。模型組件——Dataset、Record以及Field ——負(fù)責(zé)數(shù)據(jù)結(jié)構(gòu)；其中Dataset作為容納記錄對(duì)象的容器。反過來，Record對(duì)象容納 Field對(duì)象，后者則表示數(shù)據(jù)構(gòu)成。每個(gè) Field擁有一個(gè)用于表示格式規(guī)范的標(biāo)簽、一個(gè)表示該Field是否經(jīng)過計(jì)算的標(biāo)記外加數(shù)據(jù)類型。Recline.js定義了十三種數(shù)據(jù)類型，其范圍涵蓋簡單（字符串、整數(shù)與浮點(diǎn)數(shù)）到復(fù)雜（geo_point以及geoson）。一個(gè)Field當(dāng)中能夠容納一系列甚至任意數(shù)量的復(fù)雜JSON對(duì)象。 Recline.js的Backend對(duì)象提供Dataset對(duì)象與數(shù)據(jù)源之間的連接。簡單來說，大家可以利用一個(gè) Backend對(duì)象通過Record來“填充”Dataset。目前 Recline.js支持八種后端，其中包括CSV文件、 ElasticSearch、CouchDB、Google Doc電子表格等等。Recline.js甚至擁有所謂“memory”后端，允許大家直接將數(shù)據(jù)推送到Recline.js當(dāng)中（即對(duì)應(yīng)用程序進(jìn)行硬編碼）。

當(dāng)然，如果無法實(shí)現(xiàn)數(shù)據(jù)可視化處理、Recline.js 也就無法成為我們這篇文章的主角之一——這里正是視圖組件發(fā)揮威力的舞臺(tái)。Recline.js支持兩種視圖：Dataset與Widget。我之所以用“支持”這個(gè)詞來表述，是因?yàn)镽ecline.js本身并不提供 View對(duì)象、而只能通過與其它框架集成來實(shí)現(xiàn)此類功能。事實(shí)上，說明文檔中指出“Recline.js的視圖相當(dāng)于Backbone視圖的實(shí)例。”

正如其名稱所暗示，Dataset視圖顯示的是Dataset對(duì)象。舉例來說，一套Grid視圖確實(shí)就是一份包含行內(nèi)容與列標(biāo)題表格視圖。在Recline.js網(wǎng)站上的Dataset 視圖示例中，我們看到了柱狀圖、線狀圖、時(shí)間線甚至顯示在地圖當(dāng)中的地理數(shù)據(jù)。

Widget視圖允許我們創(chuàng)建其它框架當(dāng)中被簡單稱為“構(gòu)件”的顯示效果。Widget視圖能夠顯示或者控制某些數(shù)據(jù)集。

我們可以利用Widget視圖來顯示或者修改應(yīng)用程序當(dāng)中的通用數(shù)據(jù)。Recline.js說明文檔所列舉的 Widget視圖實(shí)例為QueryEditor，這套控制方案允許我們查看并修改Dataset中的當(dāng)前查詢狀態(tài)。 Recline.js的說明文檔還包含一套概述頁面，用于指引大家對(duì)Recline.js獲得更為詳盡的了解。夾雜著代碼實(shí)例的解釋內(nèi)容有助于我們的學(xué)習(xí)進(jìn)程。雖然目前的水平已經(jīng)不錯(cuò)，但其完成度似乎還不太高。舉例來說，我們只能在其中找到關(guān)于Widget視圖的概述性說明，真正的解釋卻存在于源代碼的說明文檔當(dāng)中。最后，我希望開發(fā)者能為其添加一份詳盡的術(shù)語詞匯表。也許熟悉Recline.js的專家不會(huì)遇到什么障礙，但對(duì)我來說其中的很多表述確實(shí)難于理解。

Recline.js幾乎完全以關(guān)系型視圖描述各類事物。其Dataset、Record以及Field組件非常實(shí)用，令人感到面對(duì)的是一套關(guān)系型數(shù)據(jù)庫。

Recline.js對(duì)于自身必須依賴于其它JavaScript 框架的特性毫不諱言。具體來說，Recline.js需要借用Backbone.js（JavaScript框架）才能允許用戶創(chuàng)建MVP（即模型-視圖-表現(xiàn)）應(yīng)用程序。反過來，Backbone.js也需要借用Underscore.js（JavaScript庫）才能正常運(yùn)作。

Recline.js數(shù)據(jù)管理器允許我們將將數(shù)據(jù)導(dǎo)入至Recline.js grid Dataset當(dāng)中。大家可以從grid當(dāng)中選擇要顯示的字段以及圖表類型。上圖所示為Allen Downy在其《思想狀態(tài)》一書中所使用的柱狀圖表。

Recline.js同樣利用jQuery對(duì)其后端代碼進(jìn)行了強(qiáng)化，并通過Leaflet、TimelineJS等庫支持其視圖代碼。Recline.js堪稱技術(shù)與代碼重復(fù)利用領(lǐng)域的典范性杰作。它站在多套強(qiáng)大JavaScript 庫的肩膀之上，繼承其能力并實(shí)現(xiàn)進(jìn)一步拓展。

#p#

當(dāng)HTML 5遇上大數(shù)據(jù)

如果大家需要一份簡單的圖表以及直觀的操作方式，那么InfoVis無疑是最理想的方案。只需將數(shù)據(jù)打包成JSON并交付至正確的圖表對(duì)象，圖形成果就會(huì)自動(dòng)生成。從另一方面講，如果大家希望擁有一套超越可視化范疇——即能夠生成抽象圖形設(shè)計(jì)或者純動(dòng)畫方案——的庫，那么Processing.js絕對(duì)是不二之選。

Recline.js能夠顯示時(shí)間線數(shù)據(jù)（底部）、多種地圖視圖數(shù)據(jù)（右側(cè)）以及其它基本圖表類型。

不過如果大家更關(guān)心數(shù)據(jù)本身而非可視化機(jī)制——也就是說，如果各位的主要目的在于探索數(shù)據(jù)內(nèi)容而非創(chuàng)建動(dòng)畫及交互式圖表，那么這類只需要用到少數(shù)最基本圖形類別的需求最適合交給Recline.js打理。它提供的工具允許我們從多個(gè)來源獲取數(shù)據(jù)，并在數(shù)據(jù)獲取完成后對(duì)其進(jìn)行查詢與分析。

不過單從可視化效果角度出發(fā)，D3的優(yōu)勢則無可匹敵。它提供的圖形種類與美化方式簡直令人目眩，官方網(wǎng)站上的演示更是豐富多彩。而且由于D3能夠使用現(xiàn)有DOM 對(duì)象以及網(wǎng)絡(luò)瀏覽器基礎(chǔ)設(shè)施實(shí)現(xiàn)處理工作，，因此如果大家已經(jīng)非常適應(yīng)JavaScript（特別是已經(jīng)在廣泛使用jQuery），那么其上手難度也會(huì)降低很多。即使各位稱不上JavaScript高手，數(shù)量龐大的現(xiàn)成用例也足以讓我們在大多數(shù)情況下通過復(fù)制粘貼獲得自己想要的成果。