D3.js 的基本用法外加一個略調皮的demo

前幾天看到社群裡有人發帖子比較了三個比較主流的圖表外掛，大家都對heightCharts情有獨鍾，不過無奈無良主管個人愛好D3多一些，所以我的圖表第一次就這麼給了D3···

這是我用D3+react做的一個圖表，不過由於擴充套件性不是很好，就不貼原始碼了。

http://yansm.github.io/react-d3-test/

D3的學習曲線確實有些不好，關鍵是api給的亂七八糟，還不如看demo來的明白，也讓人產生了退卻感。

其實D3不算是一個圖表外掛，他更像是操作svg的“jquery”,所以他採用了svg得座標系還有思想也讓寫東西的時候很不好掌握。

我們下面做一個簡單的例子，來說明一下他的一些主要的api。

一個圖表座標軸是最常見的部分，可惜D3最噁心的地方卻也是座標軸。

首先一個座標軸需要由一個刻度尺組成，這個刻度尺也是你再作內容時候定位所需要的，這個刻度尺以你所傳輸的資料來確定。所以你的座標軸和你的圖表內容其實都是基於這個刻度尺來決定的。

而一個刻度尺有兩項資料來建立，一個是資料的範圍以及你的空間範圍，你的資料範圍就是你的x軸資料的最大值到最小值，空間範圍就是你圖表的大小，比如你的寬度是600，那麼你的空間範圍就是 0-600，

而資料範圍有兩種辦法去決定，一個是d3自帶的extents方法，你只要把陣列給他就ok了他會給你最大值或這最小值，但是假如你的最小值有別的需求比如說需要他時0，那麼就用D3.max或者d3.min即可，同樣的給他陣列，他會給你最大值或者最小值。 1.var yExtents = [0, d3.max( data_1.map(function (e) { 2. return yAccessor(e); 3. }))]

類似這樣即可。

同樣的你的scale也可以生成了。 1.var yScale = d3.scale.linear() 2. .domain(yExtents) 3. .range([400,0]);

座標軸這裡分為orgin，linear還有time這三種，叫常用的是後兩種。後兩種都是需要domain和range兩個引數即可。

而你有了刻度尺，就可以去實現座標軸了。 1.var yAxis = d3.svg.axis()
2. .scale(yScale) 3. .orient('left');

座標軸也是兩個屬性，一個是你的刻度尺，一個是方向，top，bottom，left，right這四種。

刻度尺也還有別的，比如顏色的等。同樣的給出兩個範圍即可用作數值的輸出了。

之後我們以柱狀圖為例，講一下圖表的構成。

柱狀圖來說，每個柱都是一個svg的rect，你需要給他5個屬性，x，y，width，height，fill。

在構成的時候你需要

先選擇所有的rect 1.barSvg 2..selectAll('rect')

然後插入資料

.data(data)

這時候當資料生成了新的rect，那麼就要 1..enter().append('rect')

獲取到新資料然後生成相應的rect。而對於多餘的rect，可以使用exit()來操作。

寬度你需要根據資料的數量來定，你也可以用他給出的方式來作，這個他給的算寬的方式我忘記了，api太亂沒找到··· 1..attr('width', 750/length/2) 2. 3...attr('height', function(d) { 4. 5.return 400 - yScale(yAccessor(d)); 6. 7.})

你每次的attr都可以放入常量或者是function， 這個時候就用到了刻度尺，你給你的刻度尺一個y軸數值的引數，他返還給你一個相應的長度。

同樣的x和y座標也可以這樣計算得到 1..attr('x',function (d) { 2. return xScale(xAccessor(d)); 3. }) 4. .attr('y', function (d){ 5. return yScale(yAccessor(d)); 6. })

如果你像增加動畫，只需要加transition()和duration()以及delay來進行。

d3支援鏈式操作，甚至比jquery還要強大，你可以吧動畫儲存到你的鏈式裡，然後在後續的操作中在增加形變。

一個簡單地圖表大致就是這樣的，下面有一個教程大家可以進一步的熟悉一下。

其實d3沒有那麼難，你只要掌握了主要的方法就可以駕馭他，也許最讓人心酸的是你以為找到的是一個給出資料就可以返回結果的外掛，然而他給你的知識一個由你新增功能的框架···

程式碼線上執行及把玩地址：http://www.gbtags.com/gb/rtreplayerpreview/1095.htm 原文連結：http://www.gbtags.com/gb/share/5729.htm