D3製做基礎圖表學習總結(part1)

1、基本的環境搭建（和使用其餘框架或js庫同樣）

1.創建一個工程：

2.在html文件中引入D3的文件：

附上git地址：https://github.com/d3/d3/wiki

 

 2、創建圖表

1.線性圖表：

畫線條的思路（下面代碼都在js文件中編寫，並在htm文件中引入本身寫的該js文件）：

1）設置存放曲線的位置

      

給html文件中的container容器添加節點svg，併爲svg節點設置寬、高。

在svg節點中添加一個g節點（存放線條）並設置其位置（用了css3中的位移屬性）。

2）畫線

選擇節點g，並在節點g內添加節點path併爲其添加屬性d，同時再給d屬性賦值（路徑數據）(圖中第一步)。

定義訪問器函數，用路徑生成器製造路徑數據（圖中第二步）。

將線條按要求縮放（圖中第三步）

 3）改變線條顏色和寬度：

 

詳解：

D3文檔中對path有以下解釋：

D3文檔中對數據生成器的解釋：

D3文檔對比例尺的解釋：

地址：https://github.com/d3/d3/wiki/%E6%95%B0%E5%80%BC%E6%AF%94%E4%BE%8B%E5%B0%BA#linear

 畫座標的思路：

1.用d3.svg.axis()分別設置x軸和y軸

d3.svg.axis()爲默認軸，後面.scale(scale_x)即設置了刻度尺（scale_x爲數值比例尺）。y軸上的.orient()方法是設置軸的方位（此處設置爲left，軸在左邊顯示）。

2.設置存放軸的節點g,用call方法給節點添加軸。

3.改變座標軸的顏色：

 

 詳解：

D3文檔中對軸的解釋：

 

git地址： https://github.com/d3/d3/wiki/SVG-%E8%BD%B4#axis

 

D3中的選擇器之call方法：

 地址：https://github.com/d3/d3/wiki/%E9%80%89%E6%8B%A9%E5%99%A8#call

 2.面積圖表：

面積圖表只須要在線性圖表上稍作改動便可。

D3文檔中的svg函數中有不少類型的生成器（地址：https://github.com/d3/d3/wiki/API--%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C）：

 

 

 3.柱狀圖表

 思路：同畫線性或面狀圖表同樣，先創建一個容器，在再容器裏面添加svg節點，而後再在svg節點裏面添加內容。

        在svg裏選擇元素，而後用data方法將選擇的元素與數據綁定起來；enter()方法表明在選擇的元素不存在可是如今有數據的狀況使用，enter().append("g")表明如今建立新的節點來匹配咱們的數據,多少個數據就生成多少個節點。

        開始畫矩形：bar.append（"rect"）在每個與數據綁定了的g節點裏面添加矩形，而後相應的設置每一個矩形的y軸座標、寬度、高度（座標原點在屏幕的左上角，因此矩形的高度應該爲設定的整個svg節點的高度-y軸座標）,肯定好矩形的左上角的點的座標和矩形的寬高以後矩形就畫好了，再用.style("fill","顏色")給矩形填充顏色。

       最後放大畫好的柱狀圖:同畫上面兩種圖表同樣，設定比例尺（如：d3.scale.linear()）.

       （對比學習HTML5畫形狀和填充顏色方法：http://www.runoob.com/tags/ref-canvas.html）

 

（畫紅框那一塊 改成下面代碼

）

最後爲每一個柱狀上添加數據：每一個矩形柱上添加一個text節點，而後用.text()方法給節點添加內容（jquery中的text方法意義相似），以上的.atrr()方法同時爲多個屬性設值，

 

詳解：

（更多選擇元素上的方法：https://github.com/d3/d3/wiki/%E9%80%89%E6%8B%A9%E5%99%A8#d3_selectAll）

 

 4.使用文件中的數據以及自定義座標數據

使用文件中的數據畫圖表：

直接使用文件中的數據無法使用的，由於安全機制，咱們不能夠直接讀取本地文件中的數據，必需要在本地安裝一個web服務器（如python、node.js等等），我用的node.js做爲本地服務器。

 （node.js安裝教程：http://www.runoob.com/nodejs/nodejs-install-setup.html）

安裝好以後,打開

而後在命令行提示框輸入下面兩行啓動服務器。

 個人node安裝在c盤，工程和安裝的node在同一個目錄下，啓動服務器以後，直接在地址欄輸入完整地址就能夠讀取到文件：

 

data.csv文件裏面的內容：

1. 讀取文件中的數據（替換掉以前直接寫的數據）：

讀取以後呈現的形式以下：

2.使用數據：

 

自定義座標軸：

 

初步接觸，學的不深刻，總結下來方便本身之後學習使用。（案例學習來自慕課網）