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

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

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

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

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

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

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

1.顏色大小分布合理

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

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

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

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

確保數(shù)據(jù)不會因為設計而丟失或被覆蓋。例如在面積圖中使用透明效果來確保用戶可以看到全部數(shù)據(jù)。

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

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

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

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

7.在使用D3力導圖盡量不讓子級太靠近，會導致文字重疊顯示不清。