? ? ? ? 我是2015年開始學(xué)習(xí)D3.js叠赐，這幾年也經(jīng)常寫D3的代碼欲账，想給大家分享一下我D3學(xué)習(xí)的過程及用到的資源。
? ? ? ? 首先芭概，介紹一下D3.js是什么赛不。D3官網(wǎng)的定義是：
? ? ? ? D3.js (Data-Driven Documents)? is a JavaScript library for manipulating documents based on data.
? ? ?? D3是可視化領(lǐng)域很熱門的一個(gè)JS庫(kù)，相比于百度的Echarts罢洲，個(gè)人認(rèn)為D3實(shí)現(xiàn)更靈活踢故、更能滿足用戶自定義的可視化需求。
? ? ? ? 然后惹苗，D3能做些什么殿较？
? ? ? ? 通俗來說，D3可以編碼快速實(shí)現(xiàn)五花八門的圖表桩蓉，并且給這些圖表設(shè)計(jì)出多種多樣的交互響應(yīng)斜脂。
? ? ?? 我最開始入門，選用了一本中文書籍触机，《數(shù)據(jù)可視化實(shí)戰(zhàn)：使用D3設(shè)計(jì)交互式圖表》，如圖1所示玷或，該書淺顯易懂儡首，適合小白學(xué)習(xí)，一步一步從如何下載D3.js偏友，到配置Web環(huán)境蔬胯，再到由易到難的代碼實(shí)例，都有清楚詳細(xì)的講解位他。
? ? ? ? 學(xué)習(xí)完該書以后氛濒，對(duì)D3就有了一個(gè)基本的了解。這時(shí)候鹅髓，我開始看官網(wǎng)的例子舞竿，并輔助查詢API。D3官網(wǎng)首頁(yè)上方的一排按鈕中點(diǎn)擊 Examples（圖2 紅色框標(biāo)注的部分）窿冯，就能看到官網(wǎng)的所有例子（圖3）骗奖。
官網(wǎng)提供的例子非常豐富，而且大部分例子都提供了可運(yùn)行的源碼，如圖4所示是Sortable Bar Chart的例子执桌。
? ? ? ? ? 如果官網(wǎng)的例子仍不能滿足需求鄙皇，可以去查看D3作者Mike Bostock的博客，如圖5所示仰挣。
? ? ? ? 對(duì)新手來說伴逸，直接看源碼，可能看不懂膘壶，看API是一個(gè)途徑错蝴，另一個(gè)途徑是通過網(wǎng)上的博客學(xué)習(xí)。這里我要大力推薦饅頭華華香椎、眸宇的博客OUR D3.JS（舊版漱竖，如圖6所示），我15年接觸D3時(shí)D3還是V3版本畜伐，所以主要參考的是舊版博客（現(xiàn)已停更馍惹，僅作紀(jì)念），后面饅頭華華玛界、眸宇開了新的博客十二月咖啡館（新版万矾，如圖7所示）。話說慎框，新版這個(gè)畫風(fēng)很少女啊良狈。
? ? ? ? 這個(gè)中文博客是師兄推薦的，主要關(guān)于D3學(xué)習(xí)笨枯，內(nèi)容全面薪丁，且關(guān)鍵代碼都有詳細(xì)解釋，而且互動(dòng)活躍馅精，可以說是我D3學(xué)習(xí)的百寶箱严嗜，有什么不懂的去翻翻這個(gè)博客，大部分疑問都能得到解答洲敢。
? ? ? ? 通過以上的過程漫玄，我的D3學(xué)習(xí)正式入門了！僅僅是個(gè)人學(xué)習(xí)經(jīng)歷压彭，僅供大家參考睦优。
