學(xué)習(xí)D3并不容易，需要比較多的基礎(chǔ)知識(shí)，像JS、HTML、SVG等都必需要掌握的，同時(shí)還需要有不錯(cuò)的邏輯思考能力。但如果你能知道D3的原理，從本質(zhì)上理解D3究竟是什么，那么無論是學(xué)習(xí)還是使用D3都會(huì)更加輕松容易。

D3.js

那么D3究竟是什么呢？初學(xué)者及使用不深的開發(fā)人員可能不容易理解它，只知道可以用它開發(fā)圖表。
從字面上講D3是Data-Driven Documents的縮寫，即數(shù)據(jù)驅(qū)動(dòng)文本，這里說的文本是web頁面的DOM元素。官方的解釋為 D3是一個(gè)可基于數(shù)據(jù)操作文本的js庫，它可以幫助你使用HTML、SVG和CSS讓數(shù)據(jù)鮮活起來，并且提供了很多可視化組件，以及數(shù)據(jù)驅(qū)動(dòng)管理DOM的方法。
單純從上面的描述中是很難真正理解D3的本質(zhì)的，下面我們就幾個(gè)方面好好的說一下D3究竟是什么。

D3.js不是什么

或許要解答一個(gè)東西是什么，先從反面說一下它不是什么會(huì)更容易些。D3.js的目的是使用圖表展示數(shù)據(jù)，而這方面的js庫也非常多，最有名的可能就是百度的ECharts，并且它們也的確都非常優(yōu)秀，使用也更加簡單。如果你要使用這些js圖表庫，只要選擇你想要的圖表類型，然后按照它的格式要求給它數(shù)據(jù)就可以了，相反D3卻要麻煩很多。
那么為什么還要選擇D3呢？因?yàn)?，D3與它們并不是同一類產(chǎn)品，D3是相對更加底層的JS庫。
ECharts等圖表庫就好比是一個(gè)模板，你只要選擇喜歡的模板，然后往里填充自己的東西即可?？赡０瀹吘故悄０?，不夠靈活，如果它們能滿足你的需求那是最簡單的，直接用就可以，但如果模板無法滿足你的需求時(shí)你要怎么辦？或許你會(huì)想，自己修改需要修改的地方就可以了?？蛇@真的沒有那么簡單。它們并不像PPT、Word的模板那樣，套用后每頁都可以輕松修改內(nèi)容，處處都是看得見，摸得著，想怎么改都行。但圖表庫這些東西，你要想修改它的樣子，你就必須要明白它是怎么實(shí)現(xiàn)的：它實(shí)現(xiàn)圖表的技術(shù)是什么，結(jié)構(gòu)是怎么樣的，代碼在哪里寫的，邏輯是怎么樣的，怎么樣修改才不會(huì)造成各種影響……到最后如果能修改還好，但如果發(fā)現(xiàn)根據(jù)就無法修改，那可就真是頭都大了。

D3.js是一支畫筆

與模板相對而言，D3更像是一支畫筆，你可以得到任何你想要的圖形圖表。與畫家畫畫一樣，只要你的基本功過關(guān)，就可以隨心所欲畫出你想要的東西。當(dāng)然，使用畫筆作畫比向給定的輪廓（模板）里填充顏色要困難多了，因?yàn)槊恳粋€(gè)線條、每一處陰影等等任何東西都需要你自己考慮怎么繪制。所以在你選擇學(xué)習(xí)D3之前，要先想明白你要的究竟是什么。
為了更好的理解，我們還可以說其它圖表庫是美圖秀秀，而D3是PhotoShop或Illustrator；其它圖表庫就好比是各種app，而D3就好比是編程語言--實(shí)際上現(xiàn)在有許多js圖表庫或多或少都是用D3來“編程”實(shí)現(xiàn)的，C3就是其中一個(gè)。
如果D3是一支畫筆，那用它作畫的顏料是什么？D3是在瀏覽器這個(gè)畫板上作畫的，它的顏料自然就是HTML、SVG和CSS了，當(dāng)然，現(xiàn)在Canvas也可以用來作畫了。與那些“模板”相比，D3最大的區(qū)別就在于你需要自己處理圖表具體怎么繪制，你要思考怎么把數(shù)據(jù)轉(zhuǎn)換成圖表需要的屬性，如寬高、位置、角度等等。當(dāng)然，D3也提供了很多工具和組件來實(shí)現(xiàn)這些需求。
最終你的畫作要傳達(dá)的意境，便是賦予了生命的數(shù)據(jù)。

如何用好這支畫筆

思路清晰是最重要的前提，固定的步驟可以幫助保持清晰的思路。我把使用D3開發(fā)圖表分為以下幾個(gè)步驟：

• 明確圖表意義

  圖表形狀、形式可能是由別人來設(shè)計(jì)的，所以要首先明確圖表的意義，即它是如何表達(dá)數(shù)據(jù)的，或者說與數(shù)據(jù)之間的對應(yīng)關(guān)系是怎么樣的。

• 確定圖表結(jié)構(gòu)及內(nèi)容

  即分析好使用什么元素來展現(xiàn)圖表，以及如何組裝這些元素。例如你選擇使用柱狀圖來表達(dá)數(shù)據(jù)，你首先要決定使用什么元素來繪制柱形，你可以選擇使用div元，也可以使用SVG的rect或path等，選擇的原則是“容易實(shí)現(xiàn)”。

• 數(shù)據(jù)數(shù)量與圖表元素關(guān)聯(lián)

  使用圖表來表達(dá)數(shù)據(jù)的好處之一就是容易分辨數(shù)據(jù)與數(shù)據(jù)之間的關(guān)系，所以通常不會(huì)只有一條數(shù)據(jù)存在。根據(jù)圖表的意義與圖表結(jié)構(gòu)，使數(shù)據(jù)與圖表產(chǎn)生關(guān)聯(lián)。如果你選擇使用rect元素來繪制柱狀圖中的柱子，那么每一條數(shù)據(jù)就關(guān)聯(lián)一個(gè)rect元素，即有多少條數(shù)據(jù)，就應(yīng)當(dāng)有多個(gè)個(gè)柱子。

• 數(shù)據(jù)值轉(zhuǎn)換成圖表元素所需的屬性值

  組成圖表的元素即是用來展現(xiàn)數(shù)據(jù)的數(shù)值信息的，根據(jù)圖表的意義將數(shù)據(jù)的值使用圖表元素來表現(xiàn)。如柱狀圖中使用柱子的高低表現(xiàn)數(shù)值的大小，如果柱子是用rect元素繪制，那么它的高低便是用rect的屬性(height)控制的，這時(shí)就需要把數(shù)據(jù)的值轉(zhuǎn)換成rect的屬性值。