相信大多數(shù)設(shè)計(jì)師對(duì)d3.js有點(diǎn)陌生。這是一個(gè)由紐約時(shí)報(bào)可視化編輯Mike Bostock與他斯坦福的教授和同學(xué)合作開發(fā)的數(shù)據(jù)文件處理的JavaScript Library，全稱叫做Data-Driven Documents。

隨著大數(shù)據(jù)時(shí)代的來臨，大量的數(shù)據(jù)被儲(chǔ)存，許多沉淀著的充滿“秘密”的數(shù)據(jù)需要被挖掘，而這把撬動(dòng)“數(shù)據(jù)視界”的“鐵鍬”就是D3.js?，F(xiàn)在D3的應(yīng)用非常廣泛，現(xiàn)在成為了主流數(shù)據(jù)可視化工具之一，下圖僅僅是給出了D3.js廣泛應(yīng)用的冰山一角。

力導(dǎo)向圖主要用來可視化“關(guān)系數(shù)據(jù)”，每個(gè)節(jié)點(diǎn)代表一個(gè)個(gè)體，有關(guān)系的節(jié)點(diǎn)會(huì)用直線連接起來。如果節(jié)點(diǎn)數(shù)量龐大，關(guān)系復(fù)雜，你用傳統(tǒng)的設(shè)計(jì)方法，在概念草圖階段就會(huì)畫暈了，因?yàn)槟悴荒馨凑站€性的方式一次畫出所有不重疊的點(diǎn)和盡量不交叉的線。這時(shí)候就用到了d3.js，相較于傳統(tǒng)的表格和樹狀圖，除了保留了原來的表示父子關(guān)系的樹杈結(jié)構(gòu)，D3.js加入物理算法，用兩點(diǎn)之間的作用力表示兩者關(guān)系親密度。

現(xiàn)在許多數(shù)據(jù)可視化設(shè)計(jì)者，被呈現(xiàn)大量數(shù)據(jù)的可能性迷惑了。使得很多數(shù)據(jù)可視化作品是“充滿數(shù)據(jù)的豪豬” (The data rich porcupine)，作出了很多華而不實(shí)的圖表，太多復(fù)雜的數(shù)據(jù)和酷炫的效果讓用戶和受眾無法理解，這偏離了數(shù)據(jù)可視化的初衷，而好的數(shù)據(jù)可視化應(yīng)該是“精簡(jiǎn)的斑馬”(The Edited Zebra)。避免被技術(shù)引誘的最好方式是精簡(jiǎn)，精簡(jiǎn)不是簡(jiǎn)化，而是清晰化，清晰化的趨勢(shì)表達(dá)，或者數(shù)據(jù)顯示。例如：假設(shè)你是一位企業(yè)主，你的業(yè)務(wù)有全球影響力。你想要比較你的公司在不同國(guó)家的市場(chǎng)份額，數(shù)據(jù)可視化就是要使解讀數(shù)據(jù)更加簡(jiǎn)單而不是困難。但是，左圖表使得讀者很難去比較。

而且數(shù)據(jù)可視化的優(yōu)勢(shì)是大數(shù)據(jù)處理和大數(shù)據(jù)趨勢(shì)分析。對(duì)于太精確的數(shù)據(jù)表現(xiàn)，并不是優(yōu)勢(shì)。D3.js除了擁有處理大數(shù)據(jù)的復(fù)雜圖表類似弦圖，樹狀圖，氣泡圖，地圖等。還有基礎(chǔ)圖表類似柱狀圖，餅狀圖，折線圖，面積圖等等。它是數(shù)據(jù)可視化里的多面手，是可視化設(shè)計(jì)的不二之選。

D3.js給了我們處理數(shù)據(jù)的“畫筆”,如何正確的選擇合適圖表表現(xiàn)數(shù)據(jù)，合理使用D3里的各個(gè)維度完成可視化設(shè)計(jì),成了我們?cè)O(shè)計(jì)師的關(guān)鍵。下面我們就來看看D3.js里的元素可以有以下這7種維度。

但是人能同時(shí)處理的數(shù)據(jù)維度有限最好同時(shí)出現(xiàn)的維度控制在5個(gè)以下。在使用D3.js設(shè)計(jì)的時(shí)候同時(shí)還要注意以下幾點(diǎn):

1.顏色大小分布合理

將面積較大的部分從上到下，顏色順時(shí)針分布，不要顏色有跳躍，和混亂分布。

2.數(shù)據(jù)缺少標(biāo)注

確保任何呈現(xiàn)都是準(zhǔn)確的，比如沒有標(biāo)注，或者胡亂標(biāo)注。

3.數(shù)據(jù)顯示不清楚

確保數(shù)據(jù)不會(huì)因?yàn)樵O(shè)計(jì)而丟失或被覆蓋。例如在面積圖中使用透明效果來確保用戶可以看到全部數(shù)據(jù)。

4.在熱圖中使用不同顏色

一些顏色比其他顏色突出，賦予了數(shù)據(jù)不必要的重元素。反而應(yīng)該使用單一顏色，然后通過顏色的深淺來表達(dá)。

5.在x，y軸中帶有數(shù)字量級(jí)大時(shí)，采用簡(jiǎn)寫單位，而且數(shù)據(jù)應(yīng)該等比例變化。

6.在使用D3氣泡圖時(shí)盡量讓同樣顏色氣泡聚集在一起而不是散亂分布，這樣更容易看出趨勢(shì)。

7.在使用D3力導(dǎo)圖盡量不讓子級(jí)太靠近，會(huì)導(dǎo)致文字重疊顯示不清。