通過前兩篇的介紹，我們已經(jīng)了解了D3.js最為核心的東西--使用數(shù)據(jù)驅(qū)動的方式操作DOM元素，并且我們說，只要掌握了它就學會了D3.js。或許你心里在想，等等，為什么你已經(jīng)明白了前兩篇的內(nèi)容，卻依然還不能使用D3開發(fā)圖表呢？為什么還不能玩弄數(shù)據(jù)可視化于掌心呢？為什么還不能發(fā)家致富然后買輛特斯拉呢？為什么……？我想主要有三方面的原因：
- 基礎(chǔ)知識欠缺，如SVG、CSS、初中數(shù)學等知識還沒有很好的掌握，；
- 經(jīng)驗不足，很多問題都需要經(jīng)歷與練習才知道如何解決；
-
D3提供的其它東西還沒有掌握
前兩條就不用多說了，需要自己頭懸梁錐刺股地不斷練習，但是第三條是什么鬼？D3不就是Dava-Driven DOM嗎？它不就是數(shù)據(jù)驅(qū)動DOM嗎？還有什么其它東西？
是的，使用數(shù)據(jù)驅(qū)動的方式操作DOM元素是D3的核心本質(zhì)，但從代碼量上來講它最多也就占2成，還有其他的東西占了8成。這8成是什么東西？你可以想象，當你帥氣地將正常人無法理解的數(shù)據(jù)轉(zhuǎn)變成可視的、普通智力就能明白的、牛逼的圖表時會遇到各種問題，如數(shù)據(jù)如何分布在有限的空間范圍、如何排列布局、甚至是如何繪制形狀，這些都是雖然不困難（當然有一些也是比較困難的）但卻很麻煩的內(nèi)容，想要處理好它們可不算輕松。D3也明白這些，所以他提供了大量的內(nèi)容來幫你方便的處理這些問題，而這些東西我稱之為工具。
工具
D3提供了大量的工具--太多了，我都不知道該從何說起了--解決圖表開發(fā)過程中的常見問題。其中比較常用的有動畫、布局、形狀、比例尺、事件等幾種類型，與這些類型相關(guān)的模塊大致如下
動畫
- d3-transition
主要用于狀態(tài)改變時的動畫過渡效果，使用起來比較簡單，selection.transition()方法即可創(chuàng)建一個過渡動畫，然后使用與操作dom相同的api（attr,style等）設置屬性的目標狀態(tài)值即可
- d3-ease
動畫緩沖函數(shù)，定義了各種常用的緩沖類型
- d3-timer
高效的時間定時器，可用于執(zhí)行自己的動畫等內(nèi)容
布局
- d3-chord
弦布局，可用于表現(xiàn)點與點之間流量大小類型的數(shù)據(jù)
- d3-force
力導向布局，通過模擬各種力學展現(xiàn)節(jié)點與關(guān)系數(shù)據(jù)，有比較好的動態(tài)效果，也是大家用得比較多的一種布局
- d3-hierarchy 層級布局
層級布局，用于表現(xiàn)有層級關(guān)系的數(shù)據(jù)，主要有樹形圖、簇狀圖等
形狀
- d3-shape
這個模塊中定義了很多常用形狀，可以方便的生成形狀所需的屬性數(shù)據(jù)，如弧、餅、線、區(qū)域等。這些形狀也可以直接在畫布（Canvas）上繪制出來。
- d3-path
使用畫布（Canvas）的路徑api方式生成svg中的路徑指令字符串（path的d屬性）
- d3-polygon
多邊形相關(guān)操作，如計算面積、求中心點、判斷是否包含某個點等
比例尺
- d3-scale
這個應該是我們最常用的模塊之一了，主要用于映射數(shù)據(jù)值的范圍與圖上的空間范圍
- d3-axis
坐標軸，可以方便的根據(jù)數(shù)據(jù)生成常用的坐標軸，坐標軸單位可以是時間等你需要的單位或數(shù)值
事件
- d3-dispatch
自定義事件分發(fā)機制，可方便的創(chuàng)建自己需要的事件分發(fā)器。利用事件機制可以很好的解耦代碼。
- d3-drag
拖拽事件，使用比較多的事件類型，可以方便實現(xiàn)拖拽效果
- d3-zoom
縮放及整體拖動（pan）事件
小結(jié)
今天我們簡單介紹了D3提供的常用工具，但并沒有詳細說明，因為任何一個內(nèi)容詳細的展開說都需要比較長的篇幅，以后我們會具體的介紹這些工具的使用方法。查看官方文檔是學習使用這些工具的最佳途徑，所以大家最好去翻看一下官方文檔對各個工具的解釋說明。
由于工具內(nèi)容比較豐富，要記住每個api的具體用法太困難也沒有必要，因為文檔都是在線的，可以隨時查看。雖然我不主張大家去記api，但我們一定要知道有哪些方面的工具可以使用，這樣即使我們記不住具體api的名字或參數(shù)信息，也能夠有的放矢地去查找，而不會像無頭蒼蠅一樣到處亂撞。
歡迎大家關(guān)注我的微信公眾號
