D3快速入門
Data Driven Documents
簡(jiǎn)介
圖表的繪制
在web下驾锰，支持繪圖的有svg和canvas。
百度的echarts是使用canvas宣吱，阿里的AntV的底層繪圖G是支持svg和canvas(ps:G4.0正在準(zhǔn)備支持webgl陡鹃，這樣的話可以使用顯卡增強(qiáng)繪制)。
今天的主角d3js是支持同時(shí)svg和canvas的疚脐。
svg與canvas
svg是及其形狀都是標(biāo)簽形式的，就像提供了很多各種形狀邢疙，你選擇圖形給上貼棍弄。而且每個(gè)形狀都支持事件以及屬性望薄。
canvas是給你一個(gè)畫板，給你一個(gè)筆呼畸，調(diào)api繪制來繪制圖形痕支。
svg可以很輕松的捕捉鼠標(biāo)事件，比如鼠標(biāo)移入到矩形等等蛮原。也可以直接操作某個(gè)形狀的屬性卧须。
canvas只能先捕獲事件，然后定位儒陨，計(jì)算是否在某個(gè)形狀上花嘶。繪制大數(shù)據(jù)量時(shí)，性能比較好框全。
d3和echarts
echart是配置式的察绷，需要按照文檔進(jìn)行配置即可。
d3是需要通過調(diào)用api津辩，先處理數(shù)據(jù)轉(zhuǎn)換。繪制容劳，加入交互喘沿。
所以目前推薦在常規(guī)交互下的圖表使用echarts，定制度較高或者重交互的圖表可以使用d3js使用svg繪制竭贩。
關(guān)于文檔
強(qiáng)烈建議速讀一遍api文檔蚜印，通過文檔以及例子，就能很快了解實(shí)現(xiàn)某種圖需要哪些api
先來演示一版
本文就以餅圖舉例留量，echarts餅圖截圖：
寫代碼之前
假如需要實(shí)現(xiàn)這個(gè)餅圖窄赋。我們可以拆解圖表：
在上面我們看到：有標(biāo)題，圖例楼熄，餅圖上有：扇形忆绰，文字，還有浮動(dòng)框可岂，鼠標(biāo)hover扇形是有變大效果错敢，如果如果數(shù)據(jù)發(fā)生變化，我們需要更新缕粹。
第一步 繪制基礎(chǔ)結(jié)構(gòu)及初始化相關(guān)參數(shù)
首先是將圖表重與數(shù)據(jù)無關(guān)的dom結(jié)構(gòu)繪制出來稚茅，比如：標(biāo)題，圖例平斩，以及定位亚享。
其次我們需要初始化繪制需要的相關(guān)對(duì)象。比如：d3.pies用于布局計(jì)算绘面，d3.arc用于繪制扇形欺税，以及tips糜芳。
第二步 更新圖表加入更新動(dòng)畫
首先由于數(shù)據(jù)量會(huì)變，所以我們需要每次更新dom魄衅，將多余的dom刪除峭竣，缺少的dom天加上，保證dom和數(shù)量一致晃虫。
數(shù)據(jù)值的更新皆撩，調(diào)用繪圖，重新繪制扇形哲银。
第三部 加入交互
首先是餅圖中扇形區(qū)域鼠標(biāo)移入移出的交互扛吞，
其次是圖例中矩形點(diǎn)擊隱藏/顯示該數(shù)據(jù)。
這是我們實(shí)現(xiàn)的效果荆责。
總結(jié)通用架子
通過這個(gè)例子滥比，我們可以看到，d3js做圖表比較麻煩做院，所有的內(nèi)容基本需要自己調(diào)用api繪制盲泛，正是這樣可控性高，可以很輕松的實(shí)現(xiàn)各種圖表定制键耕。
d3實(shí)現(xiàn)一個(gè)交互圖表寺滚。我們其實(shí)都是需要這三步：
第一步，初始化屈雄，與數(shù)據(jù)發(fā)生變化無關(guān)的相關(guān)參數(shù)村视，dom及對(duì)象
第二步，繪制函數(shù)酒奶，將數(shù)據(jù)進(jìn)行綁定蚁孔，繪制出與數(shù)據(jù)相關(guān)的形狀及對(duì)象。
第三步惋嚎，加入交互杠氢，各種交互事件，定時(shí)更新等等瘸彤。
常見圖表的繪制
柱狀圖修然，折線，散點(diǎn)圖：直接使用比例尺质况，即可換算位置和大小愕宋。
d3-chord：制作玄圖
d3.pie：制作餅圖，環(huán)圖结榄，儀表盤
d3-geo：制作地圖
d3-force：力導(dǎo)圖
d3-hierarchy：樹圖中贝，樹矩形圖，包等等
d3.histogram:直方圖
交互類：
d3-zoom：實(shí)現(xiàn)縮放
d3-drag：實(shí)現(xiàn)拖動(dòng)
