d3.js讀書筆記-1

d3.js入門

d3入門

D3是一個強大的數據可視化工具，它是基於Javascript庫的，用於建立數據可視化圖形。 在生成可視化圖形的過程當中，須要如下幾步：

1. 把數據加載到瀏覽器的內存空間；
2. 把數據綁定到文檔中(這裏的文檔指的是html文檔)的元素,根據須要建立新元素；
3. 解析每一個元素範圍內的數據併爲其設置相應的可視化屬性，實現元素的變換(transforming);
4. 響應用戶輸入實現元素狀態的過渡(transitioning);

SVG

D3最適合用來生成和操做SVG(Scalable Vector Graphics,可伸縮矢量圖形)。SVG是一種文本格式，每一個SVG都是使用相似於html標記來定義的。在SVG標籤中能夠嵌入不少可見的元素，包括rect(矩形)、circle(圓形)、ellipse(橢圓形)、line(直線)、text(文本)和path()。下面是簡單的定義SVG以及各類嵌入其中的圖形。

• SVG

<svg width="500" height="50"></svg>
在這裏像素是默認的計量單位，沒必要加上"px"。

• rect

rect用於繪製矩形。x和y用於指定矩形左上角的座標(基於像素的座標系統的原點一般位於畫布的左上角)，而width和height用於指定其寬和高。

<rect x="0" y="0" width="500" height="50"/>

• circle

circle用於繪製圓形。cx和cy用於指定圓心座標，而r用於指定半徑。

<circle cx="250" cy="25" r="25"/>

ellipse與circle 相似，只不過每一個軸要分別指定半徑。所以，半徑屬性再也不是r，而是rx和ry。

<ellipsecx="250" cy="25" rx="100" ry="25"/>

• line

line用於繪製直線。x1和y1用於指定起點座標，x2和y2用於指定終點座標。另外，必須用stroke指定直線的顏色才能看得見。

<linex1="0" y1="0" x2="500" y2="50" stroke="black"/>

• text

text用於繪製文本。x用於指定文本左上角的位置，y用於指定字體的基線位置。<text x="250" y="25">Easy-peasy</text>

• path

path用於繪製前面圖形以外的其餘複雜圖形（如地圖上的國境線）。

1.3 svg元素的樣式

常見的svg屬性有下面這些。

fill

圖形填充的顏色值

stroke

圖形輪廓的顏色值

stroke-width

圖形輪廓的寬度

opacity

0.0(徹底透明)到1.0(徹底不透明)之間的數值

對於文本d3還能夠使用font-famliy和font-size這兩個屬性。

svg中沒有"層"和深度的概念，若是多個圖形重疊，那麼就會出現遮蓋的狀況。能夠在爲fill或stroke屬性指定顏色的時候使用rgba()。rgba()接受0到255

（包含及）之間的三個值，分別表明紅、綠、藍，還接受第四個0.0到1.0（包含及） 之間的透明度值。

例以下面的這段代碼：

<rect x="0" y="0" width="30" height="30" fill="purple"/>
<rect x="20" y="5" width="30" height="30" fill="blue"/>
<rect x="40" y="10" width="30" height="30" fill="green"/>
<rect x="60" y="15" width="30" height="30" fill="yellow"/>
<rect x="80" y="20" width="30" height="30" fill="red"/>

d3.j3語法

基本語法

d3對DOM元素的選擇相似於JQuery,以下：

d3.select("body").append("p").text("New paragraph!");

記住一點：在連綴方法時，次序很重要。每一個方法的輸出必須與下一個方法 期待的輸入匹配。若是相鄰的輸出和輸入不匹配，那麼結果就像在接力賽跑中把接力棒扔到地上同樣。

將數據綁定到DOM元素上，綁定的意思就是把數據「附加」或關聯到特定的元素。

    var dataset = [ 5, 10, 15, 20, 25 ];

    d3.select("body").selectAll("p")

    .data(dataset)

    .enter()

    .append("p")

    .text("New paragraph!");

• 選擇DOM中的body元素，把它交給連綴方法中的下一個方法。
• 選擇DOM中的全部段落。由於尚未段落，因此返回空元素。能夠認爲這個空 元素表明立刻就會建立的段落。
• 解析並數出數據值。dataset數組中有5個值，於是此後的全部方法都將執行五 遍，每次針對一個值。
• 要建立新的綁定數據的元素，必須使用enter()。這個方法會分析當前選擇的 DOM元素和傳給它的數據，若是數據值比對應的DOM元素多，就建立一個新的佔位元素。而後把這個新佔位元素的引用交給鏈中的下一個方法。
• 取得由enter()建立的空佔位元素，並把一個p元素追加到相應的DOM中。而後它再把本身剛建立的元素交給鏈中的下一個方法。
• 取得新建立的p元素，插入文本值。

一個簡單的矩形繪製

    //svg元素的寬和高
   var w = 500;
   var h = 100;
   //不一樣div元素之間的間隔
   var barPadding = 1;
   
   var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
       11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
   
   //建立svg元素，制定svg元素的寬和高
   var svg = d3.select("body")
      .append("svg")
      .attr("width", w)
      .attr("height", h);
             //建立矩形
   svg.selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("x", function(d, i) {
       //返回每一個矩形的x座標軸，從左到右
        return i * (w / dataset.length);
      })
      .attr("y", function(d) {
       //返回每一個矩形的Y座標軸，從上到下
        return h - (d * 4);
      })
      //每一個矩形的寬度，減去barPadding，是爲了元素之間存在間隔
      .attr("width", w / dataset.length - barPadding)
      //每一個矩形的高度
      .attr("height", function(d) {
        return d * 4;
      })
      //爲每一個矩形填充顏色
      .attr("fill", function(d) {
     return "rgb(0, 0, " + (d * 10) + ")";
      });
             //爲每一個矩形添加標記
   svg.selectAll("text")
      .data(dataset)
      .enter()
      .append("text")
      .text(function(d) {
        return d;
      })
      .attr("text-anchor", "middle")
      //這裏文本選擇在矩形的中央偏下方
      .attr("x", function(d, i) {
        return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
      })
      .attr("y", function(d) {
        return h - (d * 4) + 14;
      })
      //爲文本添加css
      .attr("font-family", "sans-serif")
      .attr("font-size", "11px")
      .attr("fill", "white");

建立散點圖

//Width and height
   var w = 500;
   var h = 100;
   //主數組表示每一個數據「點」元素，每一個子數組包含x座標和y座標
   var dataset = [
       [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
       [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
        ];
 
   //Create SVG element
   var svg = d3.select("body")
      .append("svg")
      .attr("width", w)
      .attr("height", h);
   svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return d[0];
      })
      .attr("cy", function(d) {
        return d[1];
      })
      .attr("r", function(d) {
        return Math.sqrt(h - d[1]);
      });
//這裏是繪製標籤
   svg.selectAll("text")
      .data(dataset)
      .enter()
      .append("text")
      .text(function(d) {
        return d[0] + "," + d[1];
      })
      .attr("x", function(d) {
        return d[0];
      })
      .attr("y", function(d) {
        return d[1];
      })
      .attr("font-family", "sans-serif")
      .attr("font-size", "11px")
      .attr("fill", "red");