學(xué)習(xí)D3并不容易，需要比較多的基礎(chǔ)知識捉邢，像JS脯丝、HTML、SVG等都必需要掌握的伏伐，同時(shí)還需要有不錯(cuò)的邏輯思考能力宠进。但如果你能知道D3的原理，從本質(zhì)上理解D3究竟是什么藐翎，那么無論是學(xué)習(xí)還是使用D3都會更加輕松容易材蹬。
D3.js
那么D3究竟是什么呢？初學(xué)者及使用不深的開發(fā)人員可能不容易理解它吝镣，只知道可以用它開發(fā)圖表赚导。
從字面上講D3是Data-Driven Documents的縮寫，即數(shù)據(jù)驅(qū)動文本赤惊，這里說的文本是web頁面的DOM元素吼旧。官方的解釋為 D3是一個(gè)可基于數(shù)據(jù)操作文本的js庫，它可以幫助你使用HTML未舟、SVG和CSS讓數(shù)據(jù)鮮活起來圈暗，并且提供了很多可視化組件，以及數(shù)據(jù)驅(qū)動管理DOM的方法裕膀。
單純從上面的描述中是很難真正理解D3的本質(zhì)的员串，下面我們就幾個(gè)方面好好的說一下D3究竟是什么。
D3.js不是什么
或許要解答一個(gè)東西是什么昼扛，先從反面說一下它不是什么會更容易些寸齐。D3.js的目的是使用圖表展示數(shù)據(jù)欲诺，而這方面的js庫也非常多，最有名的可能就是百度的ECharts渺鹦，并且它們也的確都非常優(yōu)秀扰法，使用也更加簡單。如果你要使用這些js圖表庫毅厚，只要選擇你想要的圖表類型塞颁，然后按照它的格式要求給它數(shù)據(jù)就可以了，相反D3卻要麻煩很多吸耿。
那么為什么還要選擇D3呢祠锣？因?yàn)椋珼3與它們并不是同一類產(chǎn)品咽安，D3是相對更加底層的JS庫伴网。
ECharts等圖表庫就好比是一個(gè)模板，你只要選擇喜歡的模板妆棒，然后往里填充自己的東西即可是偷。可模板畢竟是模板募逞，不夠靈活，如果它們能滿足你的需求那是最簡單的馋评，直接用就可以放接，但如果模板無法滿足你的需求時(shí)你要怎么辦？或許你會想留特，自己修改需要修改的地方就可以了纠脾。可這真的沒有那么簡單蜕青。它們并不像PPT苟蹈、Word的模板那樣，套用后每頁都可以輕松修改內(nèi)容右核，處處都是看得見慧脱，摸得著，想怎么改都行贺喝。但圖表庫這些東西菱鸥，你要想修改它的樣子，你就必須要明白它是怎么實(shí)現(xiàn)的：它實(shí)現(xiàn)圖表的技術(shù)是什么躏鱼，結(jié)構(gòu)是怎么樣的氮采，代碼在哪里寫的，邏輯是怎么樣的染苛，怎么樣修改才不會造成各種影響……到最后如果能修改還好鹊漠，但如果發(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)系叉存，所以通常不會只有一條數(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的屬性值。
