D3序

最近作公司的APM項目涉及到數據可視化，簡單調研了一下目前業內推崇的工具，天然最終選擇是非D3莫屬，特別是看了官網上那些絕妙的示例以後,感受這玩意兒炫到爆！選擇D3最重要的一點是D3提供基礎的必要的功能，在這些功能之上咱們能夠高度自定義本身的圖表。看了倆天《Data Visualization with D3.js Cookbook》算是入門了吧，看一點就記錄一下，之後也好回顧！

`
D3的簡介在網上有不少，《Data Visualization with D3.js Cookbook》中用了很短的一段做介紹：'D3.js is a JavaScript library designed to display digital data in a dynamic graphical form. It helps you to bring data to life using HTML, SVG, and CSS. D3 allows great control over the final visual result, and it is the hottest and most powerful web-based data visualization technology on the market today.'[1]

關鍵詞： dynamic graphical form driven by data , 而後就是hottest and most powerful（我相信羣衆的眼睛是雪亮的） ，看到這倆點也就敲定就選他了！

D3基本的幾個功能包括：元素選擇，數據綁定，值域映射，座標定義，動畫。除此以外還提供多種經常使用的圖形佈局，如餅圖，樹狀圖，力學圖等。

D3的選擇器（支持CSS選擇器語法）跟jquery的選擇器存在很大差異，D3的選擇器能夠選擇不存在的元數，而後更據後面綁定的數據的數量動態的建立對應數量的元素。在根據數據動態生成元素這裏要提到三個個操做 enter(), update(), exit() enter()通常用在data()以後能夠理解成匹配數據和顯示元素（顯示元素這裏我指的不是一個動做，而是指表明數據顯示在界面上的html元素）的個數，update即更新綁定到html元素上的數據，exit呢就是獲得多於的html元素，enter以後呢通常要append（若是缺乏html元素會添加，若是已足夠那麼append不會執行，d3會本身去判斷） ,exit以後呢要remove，意思是刪掉多於的元素。
綁定數據後相應的DOM節點上會多出一個屬性：__data__這是屬性的值就是綁定到相應節點的數據。

值域映射很好理解，目的是爲了便於圖形表示將原始的值映射到另外一個值域，也就是數學上的函數映射： y=f(x) 。 d3提供一些基本的映射規則，固然也容許你本身定義本身的映射函數，方法見以前提到的那本書的chapter 4中的Implementing a custom interpolator一節（這本書確實講的很好）.

座標定義很簡單的，就像用筆在紙上畫圖同樣，只不過這裏用的是代碼。規定好相應的值域映射而後綁定到相應元素就好。 值得一提的是動態座標，即根據數據或顯示須要動態跟新座標的比例，使人驚訝的是這個操做僅僅從新定義座標軸的值域便可，並且還能添加過渡的動畫，太讚了！！！

動畫部分很是簡單transition()，ease()，delay() 就完了。

再提一下D3的線條，也就是代碼裏面常見的links ,好比var link=d3.layout.force.links();這個link裏的元素就是保存的線條，若是你仔細看裏面的數據結構的話，能夠發現裏面有source和target倆個屬性，顧名思義也就是起始點和目標點.在畫樹狀圖的時,因爲樹狀圖不可能有迴路，若數據中明顯有迴路,d3會忽略這些迴路，若想保留這些迴路，方法就是本身保留迴路中的一條邊，而後手動將這條邊添加到links數組裏面去，而這條邊就是有source和target（d3處理事後的source和target,裏面包含位置信息）

簡要的歸納就這麼多，有時間再奉上幾篇別人的做品研究和本身的網絡拓撲圖的代碼 :)
`